### Execute own JavaScript Functions

To execute own defined javaScript functions, use the WebEngine method executeScript (requires the JavaObject library).
For this example a simple form is used with a WebView, Button to execute a script and a choicebox to select the script.
Define the WebView and WebEngine JavaObjects
Private wvMain As WebView
Dim joWV As JavaObject
Dim joWE As JavaObject
Assign the JavaObjects
'Assign the webview to the JavaObject
joWV = wvMain
'Get the webengine from the webview using method getEngine
Dim joWE As JavaObject = joWV.RunMethod("getEngine", Null)
'Set javascript enabled for the webengine
joWE.RunMethod("setJavaScriptEnabled", Array(True))
Load the URL into the WebView
'Load the html file from the dirapp folder
'URL with no parameter
'wvMain.LoadUrl("file:///" & File.Combine(File.DirApp, "index.html"))
'URL with parameter name used by function3 - see below
wvMain.LoadUrl("file:///" & File.Combine(File.DirApp, "index.html?name=Hello World"))
The Subs to execute the JavaScript Functions
'Execute the javascript function "testfunction" defined in index.html
'Examples executing javascript function
`Sub btnExecuteScript_MouseClicked (EventData As MouseEvent)
Try
Select ChoiceBoxFunction.SelectedIndex
Case 0
'Function without parameter
joWE.RunMethod("executeScript", Array("testfunction1();"))
Case 1
'Function with parameter. Set the date and time in the selector testfunction2id
Dim dt As String = DateTime.Date(DateTime.Now) & " " & DateTime.Time(DateTime.Now)
joWE.RunMethod("executeScript", Array("testfunction2('" & dt & "');"))
Case 2
'Function with no parameter but reading URL paremeter name
joWE.RunMethod("executeScript", Array("testfunction3();"))
End Select
Catch
Log(LastException)
End Try
End Sub`
The HTML index.html with the JavaScript functions defined
<html>
<header>
<script language="javascript">
//Test the functions by opening this html file and click on the links
//To run from B4J see B4J Code
//Function without parameter
//Changes the body color.
function testfunction1()
{
console.log('This is Testfunction1');
document.body.style.backgroundColor="#00f3f3";
}
//Function with parameter
//Set the value of an id. Uses innerHTML as id is textstring.
function testfunction2(newvalue)
{
console.log('This is Testfunction2 with Parameter: ' + newvalue);
document.body.style.backgroundColor="#ffffff";
//set the newvalue parameter in the element with id testfunction2id
var s = document.getElementById("testfunction2id");
s.innerHTML = newvalue;
}
//Function without parameter but getting url parameter
//Set the value of an id. Uses innerHTML as id is textstring.
function testfunction3()
{
console.log('This is Testfunction3');
var name = getUrlParameter("name");
console.log('URL Parameter name: ' + name);
document.body.style.backgroundColor="#ffffff";
//set the newvalue parameter in the element with id testfunction2id
var s = document.getElementById("testfunction3id");
s.innerHTML = name;
}
//Get the parameter from the URL
//Example: var name = getUrlParameter("name");
function getUrlParameter(par)
{
var value='';
var UrlParameter = window.location.search;
if(UrlParameter != "") {
var i = UrlParameter.indexOf(par+"=");
if(i >= 0) {
i = i+par.length+1;
var k = UrlParameter.indexOf("&", i);
if(k < 0) {
k = UrlParameter.length;
}
value = UrlParameter.substring(i, k);
for(i=0; i if(value.charAt(i) == '+') {
value=value.substring(0, i)+" "+value.substring(i+1,value.length);
}
}
value=unescape(value);
}
}
return value;
}
</script>
</header>
<body>
<p>JavaScript Execute Function</p>
<hr>
<p>Click <a href='#' onclick="testfunction1();">here</a> this URL to test the Javascript Function 1.</p>
<hr>
<p>Click <a href='#' onclick="testfunction2('This is the new value');">here</a> this URL to test the Javascript Function 2.</p>
<p>Update value triggered by function 2:</p>
<div id="testfunction2id"></div>
<hr>
<p>Click <a href='#' onclick="testfunction3();">here</a> this URL to test the Javascript Function 3.</p>
<p>Update value triggered by function 3:</p>
<div id="testfunction3id"></div>
<hr>
</body>
</html>

Changed: , Category: WebView, File: T6C284M2127.htm, ID: 2127