javascript - 使用 Microsoft Edge 的 Windows 10 应用程序中的内联脚本问题

标签 javascript windows-store-apps windows-10 microsoft-edge

我正在开发 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>

最佳答案

I went into detail about this in a blog post.

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

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

当尝试动态插入 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 将抛出上述错误。即使我将其包装在 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); 
});

You can read more about this issue here.

进一步阅读:

execUnsafeLocalFunction from MSDN

TutsPlus tutorial on jQuery and Win8

关于javascript - 使用 Microsoft Edge 的 Windows 10 应用程序中的内联脚本问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31239356/

相关文章:

javascript - 如何在DIV可见前获取clientWidth & clientHeight

javascript - 显示 ng-repeat 输出的数组中的一项

localhost - WAMPServer 在 Windows 10 上无法正常工作, "could not perform service action"

bash - 在 Windows 10 的 WSL 终端中禁用蜂鸣声

mysql 安装程序在当前包中没有找到适合安装 windows 的包

javascript函数无法正确调用

c# - 如何在 Windows 8.1 (winRT) 中获取本地文件夹大小

c# - 在代码隐藏中设置 Path.Data

c# - 适用于 Windows 应用商店应用程序的等宽字体

javascript - 如何制作一个搜索外部 .txt 文件内容的搜索栏?