Injecting External Javascript file to html page and execute methods on it WP8 Webbrowser

Question

I am struggling with execution of Javascript methods on a Webbrowser control in WP8 application . XAML i used is

<phone:WebBrowser IsScriptEnabled="True"  x:Name="mainBrowserControl"  Grid.Row="2"/>

And on button click event i ad the external javascript file testjs.js (This file is a part of aplication package and is inside the xap file) to the head section of currently loaded html page like

        string root = Package.Current.InstalledLocation.Path;           
        string jsfile_path = string.Format("{0}/testjs.js", root);

        var script = string.Format(@"var script=document.createElement('script');
                                     script.src=""{0}"";
                                     document.getElementsByTagName('head')[0].appendChild(script);", jsfile_path);
        mainBrowserControl.InvokeScript("eval", script);

Then on another button click even i tried to execute one javascript method inside the testjs.js file like

mainBrowserControl.InvokeScript("eval", "callMe();");

But it returns the error

An exception of type 'System.SystemException' occurred in Microsoft.Phone.Interop.ni.dll but was not handled in user code

Additional information: An unknown error has occurred. Error: 80020101.

The contents inside testjs.js file is just 3 simple functions. My ultimate aim is to interact (send and receive value to and from javascript functions)with an external javascript file like testjs.js from my application

 function callMe() {   
alert("hello called");
}
function showSum(val1, val2) {
alert(val1 + val2);
}
function addTwo(val1,val2) {
return val1+val2;
}

How can i call these methods on testjs.js from my windows phone app

possible duplicate of How to inject Javascript in WebBrowser control? — Jonathan Naguin
– Jonathan Naguin, Commented Nov 20, 2013 at 11:30
In my case its about Injecting external Javascript file and calling the methods inside external JS file. The suggested example or related questions shows adding scripts inline to the document.And for Microsoft.Phone.Webbrowser there is no method browser.Document — Sebastian
– Sebastian, Commented Nov 20, 2013 at 11:40
That answer is specific for Windows Webbrowser , not for Windows Phone WebBrowser , struggling again to implement that + — Sebastian
– Sebastian, Commented Nov 21, 2013 at 5:09
possible duplicate of How to inject Javascript in the WP7 WebBrowser control? — noseratio
– noseratio, Commented Mar 13, 2014 at 12:37

MojoTosh · Accepted Answer · 2014-03-13 13:26:45Z

1

Update: See the comments and link from Noseratio below, this only appears to work if the page on which you will InvokeScript already has a <script> tag in its head. This tag can be empty, but it must be present.

In the Windows Phone version of webbrowser, any attempt to invoke JavaScript must be done after the page has finished loading. The error you are receiving will occur if you try to invoke JS while the page is in any other state.

In your XAML, add a handler for the "LoadCompleted" event, like so:

<phone:WebBrowser IsScriptEnabled="True" LoadCompleted="DoneLoaded"  x:Name="mainBrowserControl"  Grid.Row="2"/>

Set your second button to "disabled" (Visibility.Collapsed) so that the user can't click on it. Then, In the code-behind for the page, implement the handler

    private void DoneLoaded(object sender, NavigationEventArgs e)
    {
        Debug.WriteLine("Loading Complete: "+e.Uri);
        if (e.Uri.ToString().Equals("/the_url_of_the_page_with_embedded_js.html"))
            // Enable the button that will invoke the JS
            // Or, simply perform the InvokeScript here
        }
    }

At this point, you can Navigate/NavigateToString to the page containing the JS. When it's done loading, the event above will fire and enable your "execute" button. As the page is done loading, the Invoke shouldn't puke anymore. That's assuming, of course, there isn't a bug in the JavaScript.

Hope this helps!

edited Mar 13, 2014 at 13:26

answered Mar 12, 2014 at 22:51

MojoTosh

1,8961 gold badge18 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

noseratio Over a year ago

Does this work for WP8 when the page has no <script> tags at all? Can you still do something like webBrowser.InvokeScript("eval", new string[] { "document.body.style.backgroundColor = 'yellow'" }) ?

MojoTosh Over a year ago

It does look like a <script> tag in the head is required, even if its empty it still works. I've done some quick tests without any <script> tag at all, and it seems to crash every time.

Collectives™ on Stack Overflow

Injecting External Javascript file to html page and execute methods on it WP8 Webbrowser

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related