How to Open Websites from Silverlight 4 and NOT use OOB Setting

As with all workarounds, they aren’t perfect implementations, this one is a start.

[adrotate banner=”16″]

The Silverlight 4 Application – Web Browser Running non-OOB

Silverlight 4 Application - Displaying HTML Non-OOB

Silverlight 4 Application – Display HTML Non-OOB

The specific things that facilitated this particular workaround are pretty simple.

First we add an iframe to the test page that the Silverlight application is hosted on.  Silverlight normally generates one for you like appnameTestPage.html.

Second we create a Silverlight page and utilize the HTML Bridge to communicate with the embedded iframe control.  Once we have a handle to the iframe we can manipulate anything about it such as the location, size, visibility, or navigate the DOM and do more advanced things.  As of now I haven’t been able to successfully “get inside” of the iframe, that might be Silverlight preventing me but that won’t stop me from trying.

This is far from complete.  The iframe is simply floating on top of the application and it would take some work in coding resizing and keeping things looking nice.  Another catch is that you’d have to change all the target settings for hrefs so that clicking an internal link doesn’t replace your entire test page.

Silverlight 4 HTML Bridge Overview

HTML Bridge is an integrated set of types and methods that enable you to do the following:

  • Attach Silverlight managed event handlers to HTML controls.
  • Attach JavaScript event handlers to Silverlight controls.
  • Expose complete managed types to JavaScript for scripting.
  • Expose individual methods of managed types to JavaScript for scripting.
  • Use managed containers for DOM elements such as windowdocument, and standard HTML elements.
  • Pass managed types as parameters to JavaScript functions and objects.
  • Return managed types from JavaScript.
  • Control various security aspects of your Silverlight-based application.

Steps To Create Silverlight 4 Browser Application (non-oob)

1. Create a Silverlight 4 Navigation Application, or any Silverlight 4 application will work.

2. Leverage the Silverlight 4 HTML Bridge by creating a new iFrame in the same page that hosts the Silverlight 4 application.  Silverlight normally generates two for you an appnameTestPage.html and an aspx version.

3. Create a new Silverlight navigation page and wire it up.

4. Add textbox, button at a minimum used for entering the URL and firing code to navigate to the URL within the iframe, and to make it visible.  I’ve added controls for testing position.

5. Override the OnPageNavigatedFrom and add code to hide the iframe, otherwise it would be visible on top of other silverlight pages.

note: Here is the code that was added to the test page

Silverlight 4 OOB Workaround Iframe

Silverlight 4 OOB Workaround Iframe

Challenges To Solve

1. Handle resizing of the browser gracefully.

2. Handle changing target property of the href’s.  Not sure if this is possible, from within Silverlight anyway, but maybe you could call some JQuery script outside Silverlight to do the work.

3. Since you are outside Silverlight you lose the advantages of worrying about what kind of browser is being used.

4. My code uses System.Windows.Web so that is an issue.

This is definitely just something to get you thinking… a start… I will gladly post the code for this and if you can improve it please send changes back!  Remember you need to add an iframe to your hosting HTML page (see image).

Application Csharp Visual Studio 2010: sl4-web-browser.zip

Csharp Code Only:  WebB.xaml.cs

XAML Code Only:  WebB.xaml

Summary

So we’ve displayed a web page from within a Silverlight application by using the Silverlight HTML bridge to reference an iframe and manipulate that iframe.  There are plenty of other challenges before this workaround is complete or hopefully a better workaround.

3 Responses

Leave a Reply to Open Website From Silverlight 4 App – Non-OOB Workaround Cancel reply

Your email address will not be published. Required fields are marked *