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

原创 2014年10月22日 16:17:00

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 onclick='sendCMD("verchselect")'>车辆选择</span></li>
    <li><span onclick='sendCMD("bigparamset")'>参数设置</span></li>
    <li><span onclick='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()
}


WebBrowser(IE) 与 JS 相互调用

在开发中我们经常将WebBrowser控件嵌入Winform 程序来浏览网页,既然是网页那么少不了JS。下面就让我们来说说他们两之间的相互调用。 在C#封装的浏览器内核中,Chromium 内核封装...
  • Insert_day
  • Insert_day
  • 2016年01月09日 13:39
  • 2086

WebBrowser控件的高级用法,c#和Javascript交互及光标位置恢复

摘要:在做Winform应用的时候,有些效果不太好做,不像网页,用CSS和HTML能做出灰常漂亮的界面来,其实用WebBrowser可以让你的程序拥有两者的优势。这里介绍一个winform内嵌WebB...
  • nnsword
  • nnsword
  • 2010年02月24日 22:54
  • 2820

C#通过webbrowser控件与javascript交互

C#通过webbrowser控件与javascript交互 1.C#里调用控件里面网页的js函数 // 调用JavaScript的messageBox方法,并传入参数 object[] obje...
  • luxiaoyu_sdc
  • luxiaoyu_sdc
  • 2011年10月22日 15:31
  • 19413

用WebBrowser获得网页传递参数

procedure AutoLogin(iDoc1:IHTMLDocument2);var    spDisp: IDispatch;    j: integer;    iELC  : IHTMLE...
  • lij3024
  • lij3024
  • 2006年05月10日 14:08
  • 818

WinForm程序执行JS代码的多种方法以及使用WebBrowser与JS交互

方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/d...
  • meixiafeng
  • meixiafeng
  • 2016年10月10日 10:00
  • 1714

MFC的WebBrowser控件 C++与JavaScript之间数据交互传递

----------------------------------------------------------------------------------------------------...
  • to_Baidu
  • to_Baidu
  • 2017年04月29日 23:59
  • 1611

使 WebBrowser 更简单的新加和执行 js, 可安装 jQuery 脚本的 C# 开源代码 - IEBrowse...

使 WebBrowser 更简单的新加和执行 js, 可安装 jQuery 脚本的 C# 开源代码 - IEBrowse......
  • gold0523
  • gold0523
  • 2014年10月04日 13:12
  • 10024

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得      一、 经 常需要在asp.net中“后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数”。 ...
  • minsenwu
  • minsenwu
  • 2012年04月25日 12:17
  • 9413

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得

Asp.net中后台*.cs与前台JS脚本之间相互调用的几点心得 一、 经 常需要在asp.net中“后台代码*.cs文件中调用javascript脚本中已经定义好的脚本函数”。 ...
  • xb12369
  • xb12369
  • 2012年06月08日 10:59
  • 747

delphi中WEBBrowser网页JS函数调用delphi函数

1.1、激活 var doc,url:Olevariant ; begin url:='about:blank' ;//或者一个有实际意义的url WebBrowser1.Navigate2(...
  • aaaa9550
  • aaaa9550
  • 2014年04月03日 12:13
  • 569
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:.NET webBrowser 与 html js脚本之间的数据互传及函数调用
举报原因:
原因补充:

(最多只允许输入30个字)