Inline Scripting issue in windows 10 apps with Microsoft edge
Question
Im developing Windows 10 store apps Javascript/Html and since there is Microsoft EDGE in apps as the browser, inline scripting no longer works. If i put the code in an external file, the page loads, but none of the click events work. Is there any solution for this. Small example where onclick attribute does not work.
Code
default.html 7 default.js
// For an introduction to the Blank template, see the following documentation: // http://go.microsoft.com/fwlink/?LinkId=232509 function gored() { document.body.style.backgroundColor = red; } (function () { "use strict"; WinJS.Binding.optimizeBindingReferences = true; var app = WinJS.Application; var activation = Windows.ApplicationModel.Activation; var isFromBackground = false; app.onactivated = function (args) { var localSettings = Windows.Storage.ApplicationData.current.localSettings; if (args.detail.kind === activation.ActivationKind.launch) { if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { // TODO: This application has been newly launched. Initialize // your application here. } else { // TODO: This application has been reactivated from suspension. // Restore application state here. } args.setPromise(WinJS.UI.processAll()); } }; app.oncheckpoint = function (args) { // TODO: This application is about to be suspended. Save any state // that needs to persist across suspensions here. You might use the // WinJS.Application.sessionState object, which is automatically // saved and restored across suspension. If you need to complete an // asynchronous operation before your application is suspended, call // args.setPromise(). isFromBackground = true; }; app.start(); })();
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>App1</title> <!-- WinJS references --> <!-- To get the latest version of WinJS, go to: http://go.microsoft.com/fwlink/?LinkId=533245 --> <link href="WinJS/css/ui-dark.css" rel="stylesheet" /> <script src="WinJS/js/WinJS.js"></script> <!-- App1 references --> <link href="/css/default.css" rel="stylesheet" /> <script src="/js/default.js"></script> </head> <body> <p>Content goes here</p> <button onclick="gored()"> Click Me</button> </body> </html>
2 answers
solution1
2 2015-07-07 21:47:18
I went into detail about this in a blog post.
Windows HTML5 apps have a strict security setting, especially when it comes to injecting code at runtime via JavaScript. I ran into this issue before as well.
You can wrap the function that you are using to inject the Javascript with another function, MSApp.execUnsafeLocalFunction() .
When attempting to dynamically insert a div, Windows 8 throws an error. Specifically, it's when trying to use something like:
div.innerHTML = "A string of some stuff"
HTML1701: Unable to add dynamic content ' a' 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=
Reason:
The reasoning behind all of these problems is the same, so I'll just state it here once for the sake of brevity. `Microsoft fears that the string can be intercepted somewhere along the line, and malicious content can be added to the values of your string.
Work Around:
The big issue with this method is that you're trying to use innerHtml. Instead, use .append.
That still won't work if you just try to pass in a string, however. What you need to do is set your string to a variable, then pass in that variable. If you do not create an object (that is, setting the string to a variable) then this will not work. If you just try to use a string, then you'll see nothing but text where the div should be.
Here's a single line example:
$panel.append('<'img src="' + item.thumbImageUrl +'" >');
If you try to pass that in, Windows 8 will throw the error seen above. Even if I wrap that in MSApp.execUnsafeLocalFunction() I will still see an error.
The workaround is as follow:
var appendString = '<'img src="' + item.thumbImageUrl '" >';
$panel.append(appendString);
Because I'm now taking that string and setting it to a variable (thereby turning it into an object), Windows 8 will allow me to pass in that object and create dynamic content.
Even then, it will occasionally throw the error above. HOWEVER, if you were to wrap that object in MSApp.execUnsafeLocalFunction(), you would then be in the clear. WinJS offers a function to wrap your own functions in, which allows you to basically say “I take responsibility for this function, and I assure you it's safe.” That function is called: MSApp.execUnsafeLocalFunction().
So the final solution looks like this:
var appendString = '<'img src="' + item.thumbImageUrl '" >';
MSApp.execUnsafeLocalFunction(function() {
$panel.append(appendString);
});
You can read more about this issue here.
Further Reading:
solution2
0 2016-03-24 12:00:45
I had a similar problem and found that a script read in the header did not work but when I moved it to the body, it did:
WORKS ON MOST BUT NOT ALL PAGES WITH 'EDGE'. WORKS WITH ALL PAGES ON ALL OTHER BROWSERS:
LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT
LT /head GT
LT body GT
WORKS ON ALL PAGES WITH 'EDGE' AND OTHER BROWSERS:
LT /head GT
LT body GT
LT script type="text/javascript" src="../ie5.js" GT LT /script GT
LT script type="text/javascript" src="../common_functions.js" GT LT /script GT
Why? Only Microsoft will know.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.