具有Microsoft Edge的Windows 10应用中的内联脚本问题

Question

我正在开发Windows 10存储应用Javascript / HTML，并且由于应用中有Microsoft EDGE作为浏览器，因此内联脚本不再起作用。 如果我将代码放在外部文件中，则会加载该页面，但所有单击事件均不起作用。 有什么解决办法吗？ 小示例，其中onclick属性不起作用。

码

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>

Answer 1

我在博客文章中对此进行了详细介绍。

Windows HTML5应用程序具有严格的安全设置，尤其是在运行时通过JavaScript注入代码时。 我之前也遇到过这个问题。

您可以使用另一个函数MSApp.execUnsafeLocalFunction（）包装用于注入Javascript的函数。

尝试动态插入div时，Windows 8引发错误。 具体来说，是在尝试使用类似以下内容的情况：

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=

原因：

所有这些问题背后的原因都是相同的，因此为了简洁起见，我在这里只说明一次。 微软担心字符串可能会被截取，并且恶意内容会添加到字符串的值中。

解决方法：

这种方法的最大问题是您正在尝试使用innerHtml。 而是使用.append。

但是，如果您只是尝试传递字符串，那仍然行不通。 您需要做的是将字符串设置为变量，然后传入该变量。 如果您不创建对象（即，将字符串设置为变量），则此操作将无效。 如果您只是尝试使用字符串，那么除了div应该位于的文本之外，您什么都看不到。

这是一个单行示例：

$panel.append('<'img src="' + item.thumbImageUrl +'" >');

如果您尝试将其传递给Windows 8，Windows 8将抛出上述错误。 即使将其包装在MSApp.execUnsafeLocalFunction（）中，我仍然会看到错误。

解决方法如下：

var appendString = '<'img src="' + item.thumbImageUrl '" >';
$panel.append(appendString);

因为我现在要使用该字符串并将其设置为变量（从而将其转换为对象），所以Windows 8将允许我传递该对象并创建动态内容。

即使这样，它偶尔也会抛出上述错误。 但是，如果要将那个对象包装在MSApp.execUnsafeLocalFunction（）中，那么您将一目了然。 WinJS提供了一个用于包装您自己的函数的函数，该函数可以使您基本上说“我对此函数负责，并向您保证它是安全的。”该函数称为：MSApp.execUnsafeLocalFunction（）。

因此，最终的解决方案如下所示：

var appendString = '<'img src="' + item.thumbImageUrl '" >';
 MSApp.execUnsafeLocalFunction(function() {
     $panel.append(appendString); 
});

您可以在此处阅读有关此问题的更多信息。

进一步阅读：

来自MSDN的execUnsafeLocalFunction

jQuery和Win8上的TutsPlus教程

Answer 2

我有一个类似的问题，发现在标题中读取的脚本不起作用，但是当我将其移至正文时，它可以起作用：

多数情况下，但并非所有带有“ EDGE”的页面都可以使用。 适用于所有其他浏览器上的所有页面：

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

在所有带有“ EDGE”和其他浏览器的页面上的工作：

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

为什么？ 只有微软会知道。

具有Microsoft Edge的Windows 10应用中的内联脚本问题

问题描述

2 个解决方案

解决方案1
2 2015-07-07 21:47:18

解决方案2
0 2016-03-24 12:00:45

具有Microsoft Edge的Windows 10应用中的内联脚本问题

问题描述

2 个解决方案

解决方案1 2 2015-07-07 21:47:18

解决方案2 0 2016-03-24 12:00:45

解决方案1
2 2015-07-07 21:47:18

解决方案2
0 2016-03-24 12:00:45