天天看點

使用CEfSharp之旅(2) js前台事件執行背景方法

記錄工作使用心得。

使用過程中想用js調用背景事件,如果做那?

不像正常接口可以直接調用通路。其實這個問題CEFSharp的設計者們,早就想好了。

那就是通過調用 JavascriptResponse 類來執行背景時間。

你可以在代碼中load js 到浏覽器中。js内容調用你的背景事件。 下面就是一個簡單的列子。

示例代碼均已上傳github    git位址

static ChromiumWebBrowser web;
        private void Browserform_Load(object sender, EventArgs e)
        {
            try
            {
                web = new ChromiumWebBrowser("www.baidu.com");  
                web.Dock = DockStyle.Fill;
                web.RequestHandler = re;
                web.FrameLoadStart += Web_FrameLoadStart;
                web.FrameLoadEnd += Web_FrameLoadEnd;
                web.LoadingStateChanged += Web_LoadingStateChanged;
                this.Invoke(new Action(() =>
                {
                    this.Controls.Add(web);
                }));

                //browser表示你的CefSharp對象使用它的RegisterJsObject來綁定你的.net類  
                web.RegisterJsObject("bound", new BoundObject());

                //在實際的JS代碼中,你将使用這樣的對象:
                //bound.myProperty; // 使用此文法通路屬性 

                //bound.myMethod(); // 使用此調用方法。

            }
            catch (Exception ex)
            {
               // MessageBox.Show(ex.ToString());
            }
           

将js事件通過注冊進入頁面,通過

bound.myMethod(); 通路背景方法。
           
bound.MyProperty 通路背景屬性。
           
private async Task initmethodAsync()
        {
            string js_func = "";        
            js_func += " var all = $(\"div[class='ng-scope']\"); for (i = 0; i < all.length; i++) { all[i].onclick = onNickName; }";
            js_func += " function onNickName() {bound.myMethod($(this).find('span').eq(0).text(),$(this).find('img').eq(0).attr('src'));}; ";
            JavascriptResponse x = await web.EvaluateScriptAsync(js_func);
        }
           

C# 事件響應類:

public class BoundObject
    {
        public string MyProperty { get; set; }
        public void MyMethod(string ShowNickName,string html)
        {
            try
            {
              Console.WriteLine("我來響應前台的的事件");
            }
            catch (Exception ex)
            {

            }
        }
     
    }
           

怎麼樣,小夥伴們。挺簡單的把? 來試試把。

繼續閱讀