.NET WebBrowser控件JS代码与C#代码相互调用

时间：2018-08-30 10:13:52 +0800 CST 浏览：1554

今天为了应对一个工作中遇到的场景，研究了下使用.NET中自带的WebBrowser时内部的JS代码与外部的C#代码相互调用的问题

转载

https://my.oschina.net/Tsybius2014/blog/643909

场景

场景1：C#程序调用JS函数刷新网页，输出再见两字；测试目标：C#调用JS函数

场景2：C#程序调用JS函数刷新网页，输出文字为用户输入的文字；测试目标：C#调用带参数的JS函数

场景3：C#程序调用JS函数获取今日的年月日信息（yyyy-MM-dd）；测试目标：C#能否正确接收JS函数返回值

场景4：JS调用C#函数，输出上面↑↑↑（指bulletin）的文字内容；测试目标：JS调用C#应用程序中带参数的函数

场景5：JS调用C#函数，将左侧输入框中的内容转大写后放到右侧输入框中；测试目标：JS调用C#应用程序中带参数的函数并接收返回值

form

using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;using System.Windows.Forms;
namespace WebBrowserJsTest
{
    [System.Runtime.InteropServices.ComVisible(true)]    public partial class FormMain : Form
    {        public FormMain()
        {
            InitializeComponent();
        } 

        /// <summary>Load函数</summary>         
        ///<param name="sender"></param>         
        ///<param name="e"></param>         
        private void FormMain_Load(object sender, EventArgs e)
        {            try {                string path = Environment.CurrentDirectory + "\\WebBrowserJsTest.html";
                                webBrowser.Navigate(path);
                webBrowser.ObjectForScripting = this;
            } catch(Exception ex) {
                MessageBox.Show(ex.ToString());
            }
        } 

        /// <summary>测试1</summary>         
        /// /// <param name="sender"></param>         
        /// /// <param name="e"></param>         
        private void btn4Test1_Click(object sender, EventArgs e)
        {
            webBrowser.Document.InvokeScript("sayGoodBye", null);
        } 

        /// <summary>测试2</summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>         
        private void btn4Test2_Click(object sender, EventArgs e)
        {
            webBrowser.Document.InvokeScript("changeBulletin", new object[] {
                txt4Test2.Text
            });
        } 

        /// <summary>测试3</summary>
        /// <param name="sender"></param> 
        /// <param name="e"></param>         
        private void btn4Test3_Click(object sender, EventArgs e)
        {            object obj = webBrowser.Document.InvokeScript("getTodaysDate", null);
            MessageBox.Show(obj.ToString());
        } 

        /// <summary>测试4</summary>
        /// <param name="word"></param>         
        public void ShowBulletin(string word)
        {
            MessageBox.Show(word);
        } 

        /// <summary>测试5</summary>
        /// <param name="word"></param>
        /// <returns></returns>         
        public string ToUpper(string word)
        {            return word.ToUpper();
        }
    }
}

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body>
    这是一个测试用的页面
    <hr /> ========输出都写在这里========
    <div id="bulletin">
        你好
    </div>
    <hr /> 测试4：JS调用C#函数，输出上面↑↑↑的文字内容
    <br /> 测试目标：JS调用C#应用程序中带参数的函数
    <br />
    <input type="button" id="showBulletin" value="调用C#1" onclick="showBulletin();" />
    <hr /> 测试5：JS调用C#函数，将左侧输入框中的内容转大写后放到右侧输入框中
    <br /> 测试目标：JS调用C#应用程序中带参数的函数并接收返回值
    <br />
    <input type="text" id="inputValue" />
    <input type="button" id="toUpper" value="调用C#2" onclick="toUpper();" />
    <input type="text" id="returnValue" />
    <script>
        //测试1
        function sayGoodBye() {
            document.getElementById("bulletin").innerHTML = "再见";
        }
        //测试2
        function changeBulletin(word) {
            document.getElementById("bulletin").innerHTML = word;
        }
        //测试3
        function prefixInteger(num, n) {
            return (Array(n).join(0) + num).slice(-n);
        }

        function getTodaysDate() {
            var dateNow = new Date();
            var year = dateNow.getFullYear();
            var month = (dateNow.getMonth() + 1);
            var day = dateNow.getDate();
            return year + "-" + prefixInteger(month, 2) + "-" + prefixInteger(day, 2);
        }
        //测试4
        function showBulletin() {
            var word = document.getElementById("bulletin").innerHTML;
            window.external.ShowBulletin(word);
        }
        //测试5
        function toUpper() {
            var word = document.getElementById("inputValue").value;
            var ret = window.external.ToUpper(word);
            document.getElementById("returnValue").value = ret;
        }
    </script>
</body>

</html>

.Net

如果这篇文章对你有所帮助，可以通过下边的“打赏”功能进行小额的打赏。

本网站部分内容来源于互联网，如有侵犯版权请来信告知,我们将立即处理。

来说两句吧

分类导航

Golang Linux Git Database FFmpeg Game Python Node.js .Net Java MacOS Windows Sharing Other