Question

我创建了一个非常简单的编辑器，它一直很好用。但是，我只是尝试将JavaScript放入其中，但我无法使用它。

编辑器的代码：

<div id="buttoncontainer">
    <input id="button" onclick="update();" type="button" value="Update page">
</div>
<div id="tryitcontainer">
    <textarea id="codebox"></textarea>
    <iframe id="showpage"></iframe>
</div>

编辑器的JavaScript：

<script>
    function update() {
        var codeinput = document.getElementById('codebox').value;
        window.frames[0].document.body.innerHTML = codeinput;
    }
</script>

我只想运行一些简单的JavaScript，在单击图像时更改图像。当我在一个完整的浏览器中运行它时，这段代码工作正常，所以我知道它的编辑器解决了这个问题。

我是否有一个简单的解决办法，我错过了？

Answer 1

该按钮未找到update（）方法。您需要该功能全局可用：

http://jsfiddle.net/t5swb7w9/1/

更新：我现在明白了。内部jQuery基本上会破坏脚本标记。有太多值得复制自己...要么使用库来附加，要么自己评估代码。只是警告说，评估用户输入很少是一件好事，而且通常是黑客的欢迎。

window.myScope = {
    update: function() {
        var div = document.createElement('div'),
            codeinput = document.getElementById('codebox').value,
            scriptcode = "";

        div.innerHTML = codeinput;
        Array.prototype.slice.apply(div.querySelectorAll("script")).forEach(function(script) {
            scriptcode += ";" + script.innerHTML;
            div.removeChild(script);
        });
        window.frames[0].document.body.appendChild(div);
        // hackers love to see user input eval'd like this...
        eval(scriptcode);
    }
};

然后你会像这样更新你的按钮：

<input id="button" onclick="myScope.update();" type="button" value="Update page">

或者，更好的是，使用addEventListener并完全忘记onclick部分。我会让你自己做研究;）

Answer 2

由于安全原因，不会执行通过innerHTML插入的JavaScript：

HTML5指定通过innerHTML插入的<script>标记不应该执行。

来自MDN: Element.innerHTML - Security considerations，另请参阅：W3: The applied innerHTML algorithm。

使用jQuery方法.append()的可能解决方案可以解决这个问题，因为它会以某种方式破坏内容。但是这仍然无法解决您的问题，因为JavaScript代码是在当前范围内执行的。这是一个测试场景：

function update() {
    var codeinput = document.getElementById('codebox').value;
    $(window.frames[0].document.body).append(codeinput);
}

Try it here

尝试插入此脚本：

<script>
    alert( document.getElementById('tryitcontainer') );
</script>

和这一个：

<p id="test">Test</p>
<script>
    window.frames[0].document.getElementById('test').innerHTML = 'updated';
</script>

第一个将返回[object HTMLDivElement]或类似的。在这里，您可以看到，您仍然与父框架在同一范围内。第二个将正确更新iframe中的内容。在尝试这些事情时请记住这一点。

也许Executing elements inserted with .innerHTML会为您提供更多信息。

自己动手编辑JS

2 个答案: