.NET中WebBrowser控制元件內部頁面的JS程式碼與外部C#程式碼的相互呼叫
阿新 • • 發佈:2019-01-04
場景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>