.NET webBrowser 與 html js腳本之間的數據互傳及函數調用

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()
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章