Question

我目前正在使用Ace（http://ace.c9.io/）从编辑器中获取代码并在iFrame中执行它。我的问题是，当我按照

的方式添加内容时

编辑器中的代码

<script type="text/javascript">
    window.onload = function() {
        alert("hello");
    }
</script>

到iFrame的 head 或 body ，代码永远不会被执行。这是我目前的代码：

将代码注入iFrame

$("#btnRun").click(function(event) {  
    event.preventDefault();

    // iFrame with id="preview"
    var preview = $("#preview").contents();

    // Get code from editor and wrap in <script> tags
    var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue()  + "</script>";

    // Append code to head or body, in this case head
    preview.find("head").append(script);
});

代码已成功添加到iFrame中，但永远不会执行。我也可以成功添加HTML / CSS并在iFrame中显示，但javascript永远不会被触及。

我尝试仅在编辑器中的脚本标记中包装代码，以及在结束标记上使用转义字符：“＆lt; / script＆gt;”但无济于事。

这是我的index.html文档中的iFrame。

index.html中的iFrame

<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
    #document
    <!-- Editor content goes here -->
</iframe>

注入代码后，iFrame看起来像这样

带有注入代码的iFrame

<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
    #document
    <html>
      <head>
        <script type="text/javascript">
          window.onload = function() {
            alert("hello");
          }
        </script>
      </head>
    <body>
    </body>
  </html>
</iframe>

同样在iFrame中调用 window.onload 或 window.top.onload 事件时，代码会执行，但只会影响包含iFrame的页面，而不会影响iFrame本身的内容。

谢谢。

注意：当代码不在 window.onload 中时，它运行正常。但是，我希望能够在执行框架的 onload 函数时执行此代码。

Answer 1

我认为您在onload事件已经触发后将JS添加到iframe。

也许您可以尝试模拟事件来运行预览代码或再次调度onload事件？

可能会有所帮助：https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent

Answer 2

我能够自己解决这个问题。问题是将脚本附加到iFrame中并不足以使其工作。要使脚本只在iFrames中执行，DOM就是直接写入它。

$("#btnRun").click(function(event) {  
    event.preventDefault();

    var previewDoc = window.frames[0].document;

    var css    = ace.edit("css-editor").getSession().getValue();
    var script = ace.edit("js-editor").getSession().getValue();
    var html   = ace.edit("html-editor").getSession().getValue();

    previewDoc.write("<!DOCTYPE html>");
    previewDoc.write("<html>");
    previewDoc.write("<head>");
    previewDoc.write("<style type='text/css'>" + css + "</style>");
    previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
    previewDoc.write("</head>");
    previewDoc.write("<body>");
    previewDoc.write(html);
    previewDoc.write("</body>");
    previewDoc.write("</html>");
    previewDoc.close();
});

Answer 3

我认为使用iframe的contentDocument属性会更优雅，然后注入脚本并触发解析器，以便它实际将其解释为JavaScript。

我在github上提出了一个小概念证明。我希望它能以更优雅的方式解决你的问题。

https://github.com/opreaadrian/iframe-injected-scripts

干杯，
阿德里安。

如何在iFrame的onload事件中执行代码？

3 个答案: