Binding to InnerHTML in MetroStyle App from Javascript

Question

I have a Div Defined as:

<div class="article-content" data-win-bind="innerHTML: content"></div>

and im binding to it with an object which has content property.

now the object i create using external resources and sometimes the content property would has content like this :

"some text <iframe width="560" height="315" src="youtubelink" frameborder="0" allowfullscreen></iframe>"

this throw exception:

Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. 

I understand the exception and why its happening but now how do i make this work ?

Answer 1

Check out the "Dynamically adding HTML" section of this document You may have to use execUnsafeLocalFunction to inject the particular HTML that you're trying to inject. Also, check out this blog post on creating a generic append function that will work in Metro style apps.