【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
【背景】基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败。
【解决思路】借助winform的HtmlElementEventHandler完成html 页面元素点击时winform执行相应方法。
HTML
<input type="button" onclick="searchResource()"> <div ></div> <input type="hidden" 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-"+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)
{
}
}<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()); } }
