logo标签列表

Visual Studio 2015 JavaScript访问DOM元素

javascriptvisual-studiointernet-explorerwindows-10
6
在 Visual Studio 2015 中的“Javascript universal Windows”应用程序中，我有这个非常简单的代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- WinJS references -->
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" />
    <script src="WinJS/js/base.js"></script>
    <script src="WinJS/js/ui.js"></script>

    <!-- aaaaa references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>

<body class="win-type-body">

    <div id="myDiv">BEFORE</div>

    <script>            

        window.onload = function () {
            document.getElementById("myDiv").innerHTML = "AFTER";
        };


    </script>
</body>

</html>

如果我运行应用程序，并选择“本地机器”或任何Windows Phone模拟器，则会看到“BEFORE”：未执行更改div的innerHtml的行。
否则，如果我在Visual Studio之外，在浏览器窗口中执行html文件，则会看到“AFTER”：这对于所有浏览器都是正确的，除了Internet Explorer 11的行为略有不同：在这种情况下，我会看到消息“Internet explorer限制此网页运行脚本或activex控件”，当我点击“允许内容”时，我会看到“AFTER”。
为什么这个非常简单的脚本在Visual Studio中不起作用？这是安全限制的问题吗，像IE一样？ 为什么在Visual Studio中完全没有关于该问题的任何消息？ 如何在Visual Studio中解决这个问题？
3个回答
4

我测试了你的代码，它是正确的，但你应该将代码写在JavaScript文件中。只需将window.onload移到default.js的开头即可。

谢谢。令人难以置信的是，Visual Studio在这种情况下没有显示消息！在我的真实应用程序中，我只需要两行JavaScript代码，因此我将它们留在了HTML文件中。 - Sean
4

这不是一个真正的错误，这就是为什么VS 2015不会提示它的原因。

事实上，内联脚本在通用应用程序中是不允许的，因为它是CSS（跨站点脚本）攻击的常见原因之一。

请参阅链接末尾的Microsoft文档中的备注第一条。

这里讨论了一些解决方法。

0

可能的一个原因是在JS脚本标签内部的代码覆盖了window.onload方法。您似乎在脚本标签中使用了相对路径和绝对路径的混合。因此，当在Visual Studio之外运行时，这些文件可能不会被包含，因此window.onload不会被覆盖。一些调试步骤如下：

  1. 检查Web开发人员控制台的错误、网络错误等（从记忆中的IE F12）
  2. 删除所有其他脚本标记并进行测试。
  3. 尝试使用 window.addEventListener("load", function{ }, false);而不是 window.onload。
谢谢。我已经按照以下方式调试了代码，但行为完全相同，在F12中也没有错误。即使在模拟器和本地机器上，按钮的onclick事件也无法工作。<!DOCTYPE html> <html> <body> <div id="myDiv">之前</div> <script>

window.addEventListener("load", function(){ document.getElementById("myDiv").innerHTML = "之后"; }, false);
</script></body> </html> - Sean
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接