【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

【背景】基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败。

【解决思路】借助winform的HtmlElementEventHandler完成html 页面元素点击时winform执行相应方法。

HTML

<input type="button" id="searchBtn" onclick="searchResource()">
<div id="resouceDetails" ></div>
<input type="hidden" id="isLoading" data-val="Y">

JS

function searchResource（）{
   1、$("#isLoading").val("N").attr("data-val","N");
   
    2、使用ajax向后台请求数据并拼接内容至resourceDetails
        $.ajax({
            type : "post",
              url : 略l,
              data:略,
              dataType : "json",
              success: function(data) {
                var htmlStr="";
                if(data.length>0){
                    for(var i=0,len=data.length;i<len;i++){
                        htmlStr+="<div data-class="rDetails" data-id=""+data[i].id+"">";
                        htmlStr+="<img ;
                        htmlStr+="</div>";
                    }
                }
                $("#resouceDetails").empty().append(htmlStr);
            }
        });
    3、$("#isLoading").val("N").attr("data-val","Y");
}

C#

winform监听searchBtn（搜索按钮）的onclick事件，并在searchResource()方法执行完毕后监听 div[data-class='rDetails']的点击事件并执行后续winform事件。

实现思路：

1、页面加载完毕后绑定searchBtn（搜索按钮）的onclick事件监听。

2、因winform无法判断js方法何时执行完毕，在searchResource()方法内借助隐藏域、在winform内启用Timer,Timer.Tick事件执行时判断：js是否执行完毕（隐藏域的 data-val==Y时js执行完毕）。

3、借助HtmlElement、HtmlElementCollection完成div[data-class='rDetails']的点击事件监听注册。

private Timer timer1 =null;
 public StudyResourceUCNew(){
      InitializeComponent();this.webBrowser1.Navigate(LoadDataPath.loadResourceCenter());
      this.webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser_DocumentCompleted);
 }
 /// <summary>
/// 网页加载完成的后续处理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
 void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    HtmlDocument htmlDoc = webBrowser1.Document; 
    HtmlElement searchFrom=htmlDoc.All["searchForm"];
    if(searchFrom!=null){
      searchFrom.Click += new HtmlElementEventHandler(searchFrom_Click);
    }
}

/// <summary>
       /// 监听搜索按钮
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       public void searchFrom_Click(object sender, EventArgs e)
       {  
           timer1 = new Timer();
           timer1.Interval = 100;
           timer1.Enabled = true;
           timer1.Tick += new EventHandler(timer1EventProcessor);//添加事件
       }

       public void timer1EventProcessor(object sender, EventArgs e)
       {
           HtmlDocument htmlDoc = webBrowser1.Document;
           HtmlElement isLoading = htmlDoc.All["isLoading"];

           //js拼接页面是否完成
           if (isLoading.GetAttribute("data-val") == "Y") {
               timer1.Stop();
               timer1.Tick -= new EventHandler(timer1EventProcessor);
               timer1 = null;

               //重新绑定资源的onclick事件
               HtmlElement resouceDetails = htmlDoc.All["resouceDetails"];
               HtmlElementCollection cells = resouceDetails.GetElementsByTagName("div"); 
                for (var i = 0; i < cells.Count; i++) { 
                    var status = cells[i].GetAttribute("data-class");
                    if (status == "rDetails")
                    { 
                        cells[i].Click += new HtmlElementEventHandler(showResourceDetial);
                    }
                }
           }
       }

       /// <summary>
       /// 查看资源详情
       /// </summary>
       /// <param name="sender"></param>
       /// <param name="e"></param>
       public void showResourceDetial(object sender, EventArgs e)
       {
          //do something 
       }

【问题】页面初次加载时需要执行searchResource（）加载数据显示初始页面，js 执行searchResource（）方法使用并不能触发HtmlElementEventHandler 监听。 

代码调整：

void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
      HtmlDocument htmlDoc = webBrowser1.Document; 
      HtmlElement searchFrom=htmlDoc.All["searchForm"];
      if(searchFrom!=null){
           searchFrom.Click += new HtmlElementEventHandler(searchFrom_Click);
           //js执行的searchForm click事件无法被监听到，需手动启动事件绑定线程
           timer1 = new Timer();
           timer1.Interval = 100;
           timer1.Enabled = true;
           timer1.Tick += new EventHandler(timer1EventProcessor);//添加事件
       }
 }

至此所有问题解决。

[ComVisibleAttribute(true)]    public partial class StudyResourceUCNew : UserControl    {
        private Timer timer1 =null;
        public StudyResourceUCNew()        {            InitializeComponent();            this.webBrowser1.Location=new Point(0,0);            this.webBrowser1.Width = this.scrollPanel.Width;            this.webBrowser1.Height = this.scrollPanel.Width;            this.webBrowser1.Navigate(LoadDataPath.loadResourceCenter());            this.webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webBrowser_DocumentCompleted);                   }
        /// <summary>        /// 网页加载完成的后续处理        /// </summary>        /// <param name="sender"></param>        /// <param name="e"></param>        void webBrowser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)        {            HtmlDocument htmlDoc = webBrowser1.Document;             HtmlElement searchFrom=htmlDoc.All["searchForm"];            if(searchFrom!=null){                searchFrom.Click += new HtmlElementEventHandler(searchFrom_Click);                //js执行的searchForm click事件无法被监听到，需手动启动事件绑定线程                timer1 = new Timer();                timer1.Interval = 100;                timer1.Enabled = true;                timer1.Tick += new EventHandler(timer1EventProcessor);//添加事件            }        }
      
       /// <summary>       /// 监听搜索按钮       /// </summary>       /// <param name="sender"></param>       /// <param name="e"></param>       public void searchFrom_Click(object sender, EventArgs e)       {                      timer1 = new Timer();           timer1.Interval = 100;           timer1.Enabled = true;           timer1.Tick += new EventHandler(timer1EventProcessor);//添加事件       }

       public void timer1EventProcessor(object sender, EventArgs e)       {           HtmlDocument htmlDoc = webBrowser1.Document;           HtmlElement isLoading = htmlDoc.All["isLoading"];
           //js拼接页面是否完成           if (isLoading.GetAttribute("data-val") == "Y") {               timer1.Stop();               timer1.Tick -= new EventHandler(timer1EventProcessor);               timer1 = null;
               //重新绑定资源的onclick事件               HtmlElement resouceDetails = htmlDoc.All["resouceDetails"];               HtmlElementCollection cells = resouceDetails.GetElementsByTagName("div");                 for (var i = 0; i < cells.Count; i++) {                     var status = cells[i].GetAttribute("data-class");                    if (status == "rDetails")                    {                         cells[i].Click += new HtmlElementEventHandler(showResourceDetial);                    }                }
           }
       }
       /// <summary>       /// 查看资源详情       /// </summary>       /// <param name="sender"></param>       /// <param name="e"></param>       public void showResourceDetial(object sender, EventArgs e)       {           StudyReSourceForm fm = new StudyReSourceForm();           HtmlElement cell = (HtmlElement)sender;           fm.CurClickResourceID = int.Parse(cell.GetAttribute("data-id"));           MyShowDialog.MyShowDialogFunc2(fm, this.FindForm());       }    }