|
How to Invoke and Pass values to a Javascript function from a WebBrowser component using Windows Forms
|
|
Rating: 246 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 8/28/2008,
in category "Windows Forms 2.0"
Views: this article has been read 29718 times
Abstract: This is a short article describing how you can invoke and pass values to a javascript function from a WebBrowser component using Windows Forms. In this article, we will navigate to a HTML page using the WebBrowser component and pass values to the javascript function kept inside the page, using Windows Forms
How to Invoke and Pass values to a Javascript function from a WebBrowser component using Windows Forms
This is a short article describing how you can invoke and pass values to a javascript function from a WebBrowser component using Windows Forms. In this article, we will navigate to a HTML page using the WebBrowser component and pass values to the javascript function kept inside the page, using Windows Forms. Let us see the steps required to do so:
Step 1: Open Visual Studio > File > New > Project. In the Project Types pane, choose the language of your choice (Visual C# or Visual Basic). In the Templates pane, choose Windows Application. Choose a name and location for the project and click OK.
Step 2: Drag and drop a button(btnBrowse) and a WebBrowser(webBrowser1) component to the form. Set the ‘Dock’ property of the WebBrowser component to ‘Bottom’.
Step 3: Now create a HTML page that will contain the javascript function. I have created this page on my D:\ and named it TestPage.html. The html after adding the javascript function will look similar to the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calling javascript</title>
<script type="text/javascript" language="javascript">
function DisplayName(name)
{
this.lbl1.document.writeln("Welcome " + name);
}
</script>
</head>
<body>
<div>
<label id="lbl1"></label>
</div>
</body>
</html>
We will be calling the function ‘DisplayName’ and pass a value to this function from our WebBrowser component.
Step 4: Create an event handler for the WebBrowser_DocumentCompleted event. We will be calling the javascript using the Document.InvokeScript method. This method executes a scripting function defined in an html page.
C#
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
if (e.Url.Equals(webBrowser1.Url))
webBrowser1.Document.InvokeScript("DisplayName", new object[] {"dotnetcurry"});
}
VB.NET
Private Sub webBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As WebBrowserDocumentCompletedEventArgs)
If e.Url.Equals(webBrowser1.Url) Then
webBrowser1.Document.InvokeScript("DisplayName", New Object() {"dotnetcurry"})
End If
End Sub
Step 5: The final step is to navigate to the page on the button click:
C#
private void btnBrowse_Click(object sender, EventArgs e)
{
webBrowser1.Navigate("file://D:/TestPage.html");
}
VB.NET
Private Sub btnBrowse_Click(ByVal sender As Object, ByVal e As EventArgs)
webBrowser1.Navigate("file://D:/TestPage.html")
End Sub
Run the application and click on the button. The text ‘Welcome dotnetcurry’ will appear if the javascript has been executed successfully. In this short article, we saw how to execute a javascript function from a Windows Form. Just remember that before the javascript is executed, the page elements referenced in the javascript function should have been loaded completely. I hope this article was useful and I thank you for viewing it.