Windows Phone development-webbrowser usage Tips

In May, a version of the face Meng WP was developed, which required the use of web technology to draw images, and the native WebBrowser controls were used. In the process of using WebBrowser control, found some pits, but also summed up a few tips to share to everyone.

First we need to understand the next WebBrowser control, as on the desktop Windows platform, like WebBrowser, are based on the IE kernel encapsulated Web Display control, usage is basically consistent with WPF, but also unmanaged resources, But the WP platform does not implement the IDispose interface, with memory control challenges. In addition, WebBrowser itself supports limited JS script and C # code interaction, resulting in more operability.

1.c# Call webbrowser function

This is mainly refers to the use of native code (C #) and WebBrowser loaded JavaScript code interaction behavior, using this method can easily implement the Web project to the WP native project porting, which is very convenient for web developers. Here we introduce 2 APIs: the Invokescript () method and the Scriptnotify event, respectively.

The Invokescript method can pass parameters and execute functions in WebBrowser-loaded JavaScript code to achieve the corresponding effect, using the following:

WebBrowser. Invokescript ("initperson"); WebBrowser. Invokescript ("initperson"newstring[] {"0 ","2001","1" });

The first paragraph is a simple call to JS function, the second line is to pass parameters and invoke JS function. These two methods are flexible enough to handle a lot of interactive behavior. Take the face of the WP version for example, I handle various user behavior in C #, and will get the parameters passed into the Webbrowser,js script response will be executed dynamically, using Web technology to draw my desired avatar, which is very flexible.

At the same time, the appropriate encapsulation of the JS function can improve the interaction efficiency, because the Invokescript can pass the parameter type only for the STRING[],JS function improper encapsulation will cause the interaction difficulty, even cannot interact, below I illustrate:

var personA = {            ' eye ': {                ' id ': 0            },            ' hair ': {                ' id ': 0            }        };         function Initperson (person) {            = person.eye.id;             = person.hair.id;        }

Here the Initperson function needs to be passed directly to the JavaScript object, which is invokescript difficult to pass directly, but we can carry out a simple encapsulation, we can successfully implement the intent, as follows:

var personA = {            ' eye ': {                ' id ': 0            },            ' hair ': {                ' id ': 0            }        };         function Initperson (person) {            = person.eye.id;             = person.hair.id;        }         function Drawperson (Eyeid, Hairid) {            = Eyeid;             = Hairid;            Initperson (PersonA);        }

So C # can be written directly as:

WebBrowser. Invokescript ("drawperson"newstring[] {"0" ,"2001" });

Can be a smooth implementation of the interaction, the above is just one way, you can also directly pass in a string, and then processed in JavaScript, as follows:

function Initperson (person) {            if (typeof person = = ' string'                )var person = eval (person);             = person.eye.id;             = person.hair.id;        }

C#:

WebBrowser. Invokescript ("initperson""{' eye ': {' id ': 0}, ' hair ': {' id ': 0}} ");

With the Magic eval () function, we can also achieve the desired effect. MVP Ching told me that using eval is inappropriate and can be replaced with the native JSON API, which you can search by yourself, using the same method as Eval.

2.webbrowser calling C # script

The API used here is primarily the Scriptnotify event, which enables JavaScript functions to invoke the effects of C # scripts and dynamically alter the behavior of the entire application, enabling Web-based apps to invoke more advanced native functionality, including location, push, live tile, etc. Do you think it's great, let's look at the simple way to achieve it.

First WebBrowser need to register the Scriptnotify event to receive information from JavaScript

WebBrowser. Scriptnotify + = (e, g) = =            {                // Response code                var result = g.value;            }; 

At the same time, JavaScript sends data in the following ways:

Window.external.notify ("parameters");

This enables the dynamic interaction of WebBrowser with the entire app, which is very convenient.

3.webbrowser of Memory control

Because WebBrowser unmanaged resources, and WP on the implementation of the IDispose interface, which brings great pressure to the memory of the app, each navigation can be clearly found that there is about 20M of memory is not released, after many checks, found that WebBrowser resources are not released, Also found that the mandatory GC also has no effect, eventually after some learning, through JS to release, greatly reduce the memory consumption, but still not thorough, you Daniel if there is a good way to guide me. Here's My method:

JS will use all of the resources are short processing:

function memoryrelease () {            null;             NULL ;        }

C # Executes each time it leaves the current page:

protected Override void Onnavigatedfrom (NavigationEventArgs e)        {            webbrowser. Invokescript ("memoryrelease");        }

In this way, the memory leaks can be effectively reduced and only used as a catalyst.

Finally, the WebBrowser control under the Silverlight architecture is a lot of pit, but it's still a very flexible control, which is a great way for developers using HTML5 to develop cross-platform apps.