首頁 > 開發者 > JavaScript
最近工作需要，學習了一下winform內嵌webbrowser控制項，然後與htm頁面中的javascript互動調用的技術，因此有了這篇心得。
總的來說，javascript與winform的code互相調用，和web開發中javascript與伺服器端代碼通過ajax互相調用有類似之處。
下面就用三個例子來說明：
一.將WebBrowser控制項放置在winform中，然後，寫一個Page1.htm，內容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function test(message)
{
alert(message);
}
</script>
</head>
<body>
<button onclick="test('test called from script code')">Button</button>
</body>
</html>
我將此Page1.htm顯示在WebBrowser中看看，這個不難寫，在winform中加上下面一句即可。
webBrowser1.Url= new Uri("C:\\workspace\\WindowsFormsApp\\WindowsFormsApp\\Page1.htm");
然後運行，在winform中的webbrowser顯示出來這個htm了，點按鈕調用javascript函數，彈出alert提示，一切都很正常，沒什麼稀奇。
二.如果我把javascript中的函數挪到winform的cs代碼裡，htm頁面還能調用的到嗎？
這有點ajax的味道了，在用戶端的javascript裡如何調用webpage.aspx.cs裡的代碼，在ajaxpro那時候，是需要在webpage.aspx.cs的代碼裡註冊一下本頁供ajax使用，在函數前也要聲明一下是ajax函數的。
再說回來，如果想調用winform中的代碼，也類似的，要給winform設定一下ComVisibleAttribute(true), 並給webbrowser控制項設定一下webBrowser1.ObjectForScripting屬性。
webBrowser1.Url= new Uri("C:\\workspace\\WindowsFormsApp\\WindowsFormsApp\\Page1.htm");
webBrowser1.ObjectForScripting = this;
其實，如果做的好，可以把這些代碼專門歸入一個類中，方便管理，這裡就變為：webBrowser1.ObjectForScripting = new 某類()了;
然後，再在winform裡寫一個函數。
public void Test(String message)
{
MessageBox.Show(message, "client code");
}
最後，htm裡調用時要用window.external首碼一下Test方法名。
<button onclick="window.external.Test('test called from windows code')">Button</button>
然後再運行，就發現，htm裡的onclick事件，居然能調用winform裡的code了，真是神奇！
完整winform代碼如下：
using System;
using System.Windows.Forms;
using System.Security.Permissions;
namespace WindowsFormsApp
{
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public partial class Form2 : Form
{
private WebBrowser webBrowser1 = new WebBrowser();
public Form2()
{
InitializeComponent();
button1.Text = "call script code from client code";
button1.Dock = DockStyle.Top;
button1.Click += new EventHandler(button1_Click);
webBrowser1.Dock = DockStyle.Fill;
Controls.Add(webBrowser1);
Load += new EventHandler(Form2_Load);
}
private void Form2_Load(object sender, EventArgs e)
{
webBrowser1.AllowWebBrowserDrop = false;
webBrowser1.IsWebBrowserContextMenuEnabled = false;
webBrowser1.WebBrowserShortcutsEnabled = false;
webBrowser1.ObjectForScripting = this;
webBrowser1.Url= new Uri("C:\\workspace\\WindowsFormsApp\\WindowsFormsApp\\Page1.htm");
}
public void Test(String message)
{
MessageBox.Show(message, "client code");
}
}
}
總結一下，關鍵的webBrowser1.ObjectForScripting屬性，ComVisibleAttribute(true)和window.external。
msdn說webBrowser1.ObjectForScripting屬性的作用是：擷取或設定一個對象，該對象可由顯示在 WebBrowser 控制項中的網頁所包含的指令碼代碼訪問。使用該屬性可以啟用 WebBrowser 控制項承載的網頁與包含 WebBrowser 控制項的應用程式之間的通訊。使用該屬性可以將動態超文字標記語言 (DHTML) 代碼與用戶端應用程式代碼整合在一起。為該屬性指定的對象可作為 window.external 對象（用於主機訪問的內建 DOM 對象）用於網頁指令碼。
可以將此屬性設定為希望其公用屬性和方法可用於指令碼代碼的任何 COM 可見的對象。可以通過使用 ComVisibleAttribute 對類進行標記使其成為 COM 可見的類。
這一步也至關重要，如果不設定ComVisibleAttribute(true)，那這個程式就不能載入顯示htm頁面，因為htm裡用了window.external.Test(）方法，該方法所在的類如果不ComVisible，就無法訪問到了。反過來，如果設定了ComVisible，卻不設定webBrowser1.ObjectForScripting屬性，那代碼執行時會報錯：window.external無效或找不到對象。
而缺少了window.external，就更甭提了，因此，這三者缺一不可。
再看看這個window.external，在常見的javascript書中不見蹤影，但卻非常有用，一個常見的應用是：
<input type="button" name="Button" value="add" onclick="window.external.AddFavorite(location.href,document.title)" />
引用別人的"在嵌入了瀏覽器的工程中，除了IE預設提供的外部方法之外，需要網頁的指令碼中能調用c++代碼，要實現這種互動，就必須實現指令碼擴充。實現指令碼擴充就是在程式中實現一個IDispatch介面，通過CHtmlView類的OnGetExternal虛函數返回此介面指標,這樣就可以在指令碼中通過window.external.XXX(關鍵字window可以省略)來引用介面暴露的方法或屬性(XXX為方法或屬性名稱)。"
再看看在c#中的指令碼擴充，只需要webBrowser1.ObjectForScripting和ComVisibleAttribute(true)簡單一設定就完事了，簡單吧！幸福吧！悲催吧！
三.再來看一個，從winform的code裡，能調用html頁面裡的javascript嗎？
Page1.htm，刪掉button，只保留javascript指令碼。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script type="text/javascript">
function test(message)
{
alert(message);
}
</script>
</head>
<body>
</body>
</html>
using System;
using System.Windows.Forms;
using System.Security.Permissions;
namespace WindowsFormsApp
{
[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[System.Runtime.InteropServices.ComVisibleAttribute(true)]
public partial class Form2 : Form
{
private WebBrowser webBrowser1 = new WebBrowser();
private Button button1 = new Button();
public Form2()
{
InitializeComponent();
button1.Text = "call script code from client code";
button1.Dock = DockStyle.Top;
button1.Click += new EventHandler(button1_Click);
webBrowser1.Dock = DockStyle.Fill;
Controls.Add(webBrowser1);
Controls.Add(button1);
Load += new EventHandler(Form2_Load);
}
private void Form2_Load(object sender, EventArgs e)
{
webBrowser1.AllowWebBrowserDrop = false;
webBrowser1.IsWebBrowserContextMenuEnabled = false;
webBrowser1.WebBrowserShortcutsEnabled = false;
webBrowser1.ObjectForScripting = this;
webBrowser1.Url= new Uri("C:\\workspace\\WindowsFormsApp\\WindowsFormsApp\\Page1.htm");
}
private void button1_Click(object sender, EventArgs e)
{
webBrowser1.Document.InvokeScript("test",
new String[] { "called from client code" });
}
}
}
這回關鍵的因素就是webBrowser1.Document.InvokeScript了，而webBrowser1.ObjectForScripting，ComVisible不再需要了。
HtmlDocument.InvokeScript 方法的作用是：執行在 HTML 頁面中定義的動態指令碼函數。
至此，javascript與winform的code就可以互相調用了，感覺和web開發也有些類似。
這項技術叫在javascript(DHTML)代碼和用戶端應用程式代碼之間實現雙向通訊.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
