.NET webBrowser 与 html js脚本之间的数据互传及函数调用

最新推荐文章于 2023-12-07 19:27:44 发布

okkk

最新推荐文章于 2023-12-07 19:27:44 发布

阅读量7.6k

点赞数 1

本文链接：https://blog.csdn.net/okkk/article/details/40377991

版权

1：.NET 向 JS程序传递数据

可以直接调用InvokeScript函数，在参数中向JS程序传递参数。

2:在JS脚本中向WebBrowser传递数据。

1：添加一个display:none的控件,比如ID: eventsender

2：需要保证documnet完全load后，在.NET中获得ID为eventsender的HTMLElement。使用Timer定时检测最可靠。

3：添加webbrowser的Navigating事件处理函数：webBrowser1_Navigated

3:JS传递数据前，将要传递的数据赋值到eventsender的innerHTML

4:JS将window.location.href的地址转换到其他页面。

5：在webBrowser1_Navigated中读取eventsender的内容，可以在innerHTML中构造命令，然后在.NET中解析命令，调用处理函数。

6：设置e.Cancel = true;取消地址跳转，维持原有页面。

7：.NET中设置eventsender的innerHTML为空，避免重复取数据。

完成。

3：当然更简单的方法可以在Navigating的URL地址中传递参数，然后设置e.Cancel = true;这个有一些限制但比较稳定。

代码：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;

namespace GJUI
{
    public partial class BrowserBase : UserControl
    {
        HtmlElement m_Eventer;
        public event Action<string> OnJSCommand;

        public BrowserBase()
        {
            InitializeComponent();
        }

        
        
        public void ShowPage(string url)
        {
            webBrowser1.Navigating -= new WebBrowserNavigatingEventHandler(webBrowser1_Navigating);
            webBrowser1.Navigating -= new WebBrowserNavigatingEventHandler(webBrowser1_Navigating);

            webBrowser1.ScrollBarsEnabled = false;
            this.webBrowser1.Navigate(url);

            Timer aT = new Timer();
            aT.Interval = 100;
            aT.Start();
            aT.Tick += new EventHandler(aT_Tick);
        }

        

        void aT_Tick(object sender, EventArgs e)
        {
            Timer aT = (Timer)sender;
            aT.Stop();
            m_Eventer = webBrowser1.Document.GetElementById("eventer");
            if (m_Eventer == null)
                aT.Start();
            else
            {
                webBrowser1.Navigating -= new WebBrowserNavigatingEventHandler(webBrowser1_Navigating);
                webBrowser1.Navigating -= new WebBrowserNavigatingEventHandler(webBrowser1_Navigating);
                webBrowser1.Navigating += new WebBrowserNavigatingEventHandler(webBrowser1_Navigating);
                aT.Dispose();
            }
        }


        protected virtual void CallCommand(string cmd)
        {
            if(OnJSCommand != null)
                OnJSCommand(cmd);
        }

        void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e)
        {
            e.Cancel = true;
            lock (this)
            {
                
                string cmd = m_Eventer.InnerHtml;
                m_Eventer.InnerHtml = "";
                if (string.IsNullOrEmpty(cmd))
                    return;

                CallCommand(cmd);
            }
            e.Cancel = true;
        }
    }
}

HTML页:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title></title>
        <meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
        <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
        <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
        <style type='text/css'>
html,body,table,head
{
    margin:0px;
    border:0px;
    overflow:hidden;
    text-align:center;
}
img
{
    margin:0px;
    padding:0px;
    border-width:0px;
}
ul
{
    margin:0px;
    padding:0px;
    list-style-type: none;
}
            
#main
{
    width:100%;
    height:100%;
}
            
#rtflowb
{
    position:absolute;
    left:auto;
    top:30px;
    right:10px;
    z-index:10000;
    background-color:#cdcdcd;
    width:180px;
    height:300px;
                
    filter:alpha(opacity=80);
    -moz-opacity:0.8; 
    opacity:0.8;
}
#rtflow
{
    position:absolute;
    left:auto;
    top:30px;
    right:10px;
    z-index:10001;
    width:180px;
    height:300px;
}
#rtinfo
{   
    display: block;
    padding:0px;
    margin:0px;
    line-height: 23px;
    overflow: hidden;
    text-align: left;
}
#rtinfo li
{
height:23px;
overflow: hidden;
display: list-item;
text-decoration: none;
}
#menulink
{
    position:absolute;
    left:auto;
    bottom:10px;
    right:10px;
    z-index:10005;  
    display:block;
    text-align:right;
}
#menulink img
{
    width:40px;
    height:40px;
}
#menulink ul
{
    list-style-type:none;
    position:relative;
    height:40px;
    line-height:40px;
    float:left;
    display:none;
}
a#menulink:hover ul
{
    display:block;
}
#menulink ul li
{
    display:inline;
    list-style-type:none;
}
</style>
	</head>
	<body>
    <div id='eventer' style='display:none;'></div>
	<div id='main'></div>
    <div id='rtflowb'></div>
    <div id='rtflow'>
    <ul id='rtinfo'>
    <li>111号车  人工告警   等待处理</li>
    <li>10号车  车门关闭故障   等待处理</li>
    <li>第3场站  通讯故障   等待处理</li>
    <li>133号车  车辆缓行告警   处理中</li>
    </ul>
    </div>
    <a href='javascript:void(0)' id='menulink'><ul>
    <li><span οnclick='sendCMD("verchselect")'>车辆选择</span></li>
    <li><span οnclick='sendCMD("bigparamset")'>参数设置</span></li>
    <li><span οnclick='sendCMD("fullscreen")'>全屏切换</span></li>
    </ul><img alt='' src='IMG/set.jpg' /></a>
	</body>
<script type="text/javascript">
    var map = new TMap("main");
    map.centerAndZoom(new TLngLat(106.09, 30.80), 15);
    map.enableHandleMouseScroll();
</script>
<script src="JS/base.js" type="text/javascript"></script>
</html>

JS代码

//本文档一定要放在body结束标签之后

禁止刷新
//document.onkeydown = function () {
//    if (event.keyCode == 116) {
//        event.keyCode = 0;
//        event.returnValue = false;
//    }
//}


document.oncontextmenu = function () {
    event.returnValue = false;
}

var eventDom = document.getElementById('eventer');
function sendout() {
    window.location.href = 'ErrorFunc.html?' + (new Date()).getTime();
}
function sendCMD(c) {//在<a>标签内时使用
    eventDom.innerHTML = c;
}
function sendOutCMD(c) {//普通JS调用
    eventDom.innerHTML = c;
    sendout()
}