javascript与Windows Presentation Foundation交互通讯（js与wpf通讯）

最新推荐文章于 2024-06-14 09:18:55 发布

转载最新推荐文章于 2024-06-14 09:18:55 发布 · 317 阅读

文章标签：

#javascript #runtime #xhtml #ViewUI

本文介绍如何在WPF应用程序中使用WebBrowser控件实现与HTML页面的双向通信，包括设置COM可见性、导航到指定URL、从WPF向HTML页面发送数据以及从HTML页面调用WPF的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wpf设置

1.给主程序类添加标签特性： [System.Runtime.InteropServices.ComVisible(true)]

如： [System.Runtime.InteropServices.ComVisible(true)]
public partial class MainWindow : Window

2.定义webbrowser导向网址：

webMain.Navigate(@"http://10.0.0.86:81");
webMain.Navigate(new Uri(@"E:\visual studio 2012\ShineHATMV1.0\WpfApp\testInterface.html", UriKind.RelativeOrAbsolute));

3.从wpf推送的页面函数及参数

webMain.Dispatcher.Invoke(new Action(() => { webMain.ObjectForScripting = this; webMain.InvokeScript("funName",new object[]{"paras"}); }));

方法名称：funName，参数：paras 页面中必须有同名同类型的参数；

4.从页面js调用wpf方法页面js调用

window.external.CallBll("test");

wpf中：需要提前定义好一个接受类

//前台js调用后台js方法
[System.Runtime.InteropServices.ComVisible(true)]
public class JSCallBack{}

在初始化一下这个类
JSCallBack jscall = new JSCallBack(this);
webMain.ObjectForScripting = jscall;

在类中定义好接收方法

//前台调用方法
public string CallBll(string type){}

5.注意 wpf 需在 webbrowser的LoadCompleted 事件执行之后才能使用 js 与 wpf 的相互之间的调用，winform没有验证

详细代码：

wpf：

View Code

namespace WpfApp
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    [System.Runtime.InteropServices.ComVisible(true)]
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //webMain.Navigate(@"http://10.0.0.86:81");
            webMain.Navigate(new Uri(@"E:\visual studio 2012\ShineHATMV1.0\WpfApp\testInterface.html", UriKind.RelativeOrAbsolute));
        }

        private void btrInCard_Click(object sender, RoutedEventArgs e)
        {
            CallBackEvent("bank");
        }
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            JSCallBack jscall = new JSCallBack(this);
            webMain.ObjectForScripting = jscall;
        }
        //向前台 推送方法
        void CallBackEvent(string type)
        {
            //function callbackEvent(isok, value, status, code, msg, fun)
            //isok:0 失败 1 成功
            //type:bankPwd
            //value：bankNo:12345679,name:张三,ablance:500
            //msg:提示信息
            switch (type)
            {
                case "test":
                    webMain.Dispatcher.Invoke(new Action(() => { webMain.ObjectForScripting = this; webMain.InvokeScript("test"); }));
                    break;
                case "bank":
                    webMain.Dispatcher.Invoke(new Action(() => { webMain.ObjectForScripting = this; webMain.InvokeScript("callbackEvent", new object[] { 1, "bankPwd", "bankNo:6221881900006135513$$bankName:农业银行", "" }); }));
                    break;
                default:
                    break;
            }
        }

    }
    //前台js调用后台js方法
    [System.Runtime.InteropServices.ComVisible(true)]
    public class JSCallBack
    {
        MainWindow mainWindow;
        public JSCallBack(MainWindow main)
        {
            mainWindow = main;
        }
        //前台调用方法
        public string CallBll(string type, int isOk, string paras)
        {
            switch (type)
            {
                case "inputBankPwd":

                    break;
                case "bank":

                    break;
                default:
                    break;
            }
            return "test";
        }
    }

}

html：

View Code

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        //function callbackEvent(isok, type,value, msg) 
        //isok:0 失败 1 成功
        //type:bankPwd
        //value：bankNo:12345679,name:张三,ablance:500
        //msg:提示信息
        function callbackEvent(isok, type, value, msg) {
            document.getElementById("test").innerHTML = isok + "|" + type + "|" + value + "|" + msg;
            alert(isok + "|" + type + "|" + value + "|" + msg);
        }
        function test() {
            document.getElementById("test").innerHTML = "test";
        }

        function callbll() {
            //window.external.CallBll(type, isok, paras);
            //type:inputBankPwd
            //isok:0 失败 1 成功
            //paras:参数：bankNo:12345679,name:张三,ablance:500
            var ss = window.external.CallBll("inputBankPwd", 1, "");
            alert(ss);
        }

    </script>
</head>
<body>
    <div id="test" onclick="callbll();">uuuu</div>
</body>
</html>

如果出现以下错误

1.如果直接在初始化中写入 webMain.ObjectForScripting = this;

则会出现如下错误：“执行了 QueryInterface 调用，请求提供 COM 可见的托管类“WpfApp.MainWindow”的默认 IDispatch 接口。不过，由于该类没有显式默认接口，并且是从非 COM 可见的类“System.Windows.Window”派生的，QueryInterface 调用将失败。这样做的目的是避免非 COM 可见的基类受 COM 版本规则的约束。”

2.如果在初始化时候直接从后台向页面执行方法，没有加载完毕webbrowser的LoadCompleted事件，会有如下，错误

“对类型“WpfApp.MainWindow”的构造函数执行符合指定的绑定约束的调用时引发了异常。”，行号为“3”，行位置为“9”。

若要避免以上两种错误，只要在加载完毕webbrowser的LoadCompleted事件之后执行交互即可，也就是说尽量不要在初始化的时候，进行交互，如要十分需要，只要使用timer，异步线程，就可以了，因为在去执行其他线程的时候主线程已经执行完毕初始化，LoadComplated事件也已经被执行完毕。