1. 程式人生 > >.NET中WebBrowser控制元件內部頁面的JS程式碼與外部C#程式碼的相互呼叫

.NET中WebBrowser控制元件內部頁面的JS程式碼與外部C#程式碼的相互呼叫

場景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>