JavaScript runtime error: Unable to add dynamic content

Question

I'm making a javascript metro app and have some code like this:

    <script>
       document.writeln(foo());//this line is trouble
    </script>

and when I tried to run, it gave me a rather long error:

Unhandled exception at line 20, column 9 in ms-appx://a375ffac-3b69-475a-bd53-ee3c1ccf4c4e/default.html

0x800c001c - JavaScript runtime error: 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. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.

How can I get around this?

Antemeridian

Why is document.write considered a 'bad practice'? – Harden

Why document.writeln() and not a real DOM manipulation method? – Vituperate

It says it in the exception, "use the toStaticHTML method." – Offbeat

Answer 1

regarding to the docs I would try :

document.writeln(window.toStaticHTML(foo()));

Corallite

Answer 2

Windows 8 restricts the content you can set through innerHTML and Writeln, because it's considered unsafe...

The correct way to add content is:

// The untrusted data contains unsafe dynamic content
var unTrustedData = "<img src='http://www.contoso.com/logo.jpg' on-click='calltoUnsafeCode();'/>";

// Safe dynamic content can be added to the DOM without introducing errors
var safeData = window.toStaticHTML(unTrustedData);

// The content of the data is now 
// "<img src='http://www.contoso.com/logo.jpg'/>" 
// and is safe to add because it was filtered
document.write(safeData);

If your code has some javascript, you can use this function (But microsoft dont recomend it):

MSApp.execUnsafeLocalFunction(function() {
    var body = document.getElementsByTagName('body')[0];
    body.innerHTML = '<div style="color:' + textColor + '">example</div>';
});

See at:

http://msdn.microsoft.com/en-us/library/windows/apps/Hh767331.aspx

For your case:

MSApp.execUnsafeLocalFunction(function() {
    document.writeln(foo());
});

Note that you should only do this if you understand your content is safe; if you don't, I would recommend using the toStaticHTML method.

Pricking

Yep. I was having trouble getting jsviews and jquery data binding to work. It was throwing this same error. I just had to wrap my template/link code block in execUnsafeLocalFunction and it all ran fine. – Arnaldo

Answer 3

Windows 8 store apps have a restriction on placing dynamic content inside innerHTML attribute. To fix this you need to include winstore-jscompat.js file from following location in your page as first reference. Please see this link to know more about winstore-jscompat.

This file is not required on Windows 10.

Volz