.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#应用程序中带参数的函数并接收返回值

winform程序

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