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

Question

I am currently using Ace ( http://ace.c9.io/ ) to take code from an editor and execute it within an iFrame. 我目前正在使用Ace（ http://ace.c9.io/ ）从编辑器获取代码并在iFrame中执行它。 My issue is that when I add something along the lines of 我的问题是，当我沿着

Code in Editor 编辑器中的代码

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

to the head or body of the iFrame, the code is never executed. 在iFrame的头部或主体上，代码永远不会执行。 This is my current code: 这是我当前的代码：

Injecting Code into iFrame 将代码注入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);
});

The code is successfully added to the iFrame, however it is never executed. 该代码已成功添加到iFrame，但是从不执行。 I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched. 我还可以成功添加HTML / CSS，它会显示在iFrame中，但永远不会碰到JavaScript。

I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail. 我尝试仅将代码包装在编辑器中的脚本标签中，以及在结束标签“ </ script>”上使用转义字符，但无济于事。

This is the iFrame in my index.html document. 这是我的index.html文档中的iFrame。

iFrame in index.html 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>

After the code is injected the iFrame looks like this 注入代码后，iFrame如下所示

iFrame with Injected Code 带注入代码的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>

Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself. 同样，从iFrame调用window.onload或window.top.onload事件时，代码会执行，但只会影响包含iFrame的页面，而不会影响iFrame本身的内容。

Thank you. 谢谢。

Note : When the code is not within window.onload it runs fine. 注意：当代码不在window.onload内时，它将运行良好。 However I wish to be able to execute this code when the frame's onload function is executed. 但是，我希望能够在执行框架的onload函数时执行此代码。

Answer 1

I would think that you are adding the JS to the iframe after the onload event has already fired. 我认为您是在onload事件触发后将JS添加到iframe中的。

Perhaps you could try simulating an event to run the preview code or dispatching the onload event again? 也许您可以尝试模拟事件以运行预览代码或再次调度onload事件？

Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent 可能的帮助： https : //developer.mozilla.org/zh-CN/docs/Web/API/Window.dispatchEvent

Answer 2

I was able to fix this myself. 我自己能够解决此问题。 The problem was that appending the script to be within the iFrame wasn't enough to make it work. 问题在于，将脚本附加到iFrame中不足以使其正常工作。 To make the script only be executed within the iFrames DOM was to write directly to it. 要使脚本仅在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

I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript. 我认为使用iframe的contentDocument属性，然后注入脚本并触发解析器，这样实际上会将其解释为JavaScript，会更优雅。

I put up a small proof of concept on github. 我在github上提出了一个小的概念证明。 I hope it solves your problem in a more elegant manner. 我希望它可以更优雅地解决您的问题。

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

Cheers, 干杯，
Adrian. 阿德里安。

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

问题描述

3 个解决方案

解决方案1
2 2015-02-01 20:21:22

解决方案2
1 2015-02-02 03:28:46

解决方案3
1 2015-02-02 22:25:15

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

问题描述

3 个解决方案

解决方案1 2 2015-02-01 20:21:22

解决方案2 1 2015-02-02 03:28:46

解决方案3 1 2015-02-02 22:25:15

解决方案1
2 2015-02-01 20:21:22

解决方案2
1 2015-02-02 03:28:46

解决方案3
1 2015-02-02 22:25:15