Fatal编程技术网
  • javascript/
  • Javascript 如何在iFrame'；s onload事件？

Javascript 如何在iFrame'；s onload事件？

javascript jquery html iframe

Javascript 如何在iFrame'；s onload事件？,javascript,jquery,html,iframe,onload,Javascript,Jquery,Html,Iframe,Onload,我目前正在使用Ace（）从编辑器中获取代码，并在iFrame中执行它。我的问题是，当我按照 编辑器中的代码 <script type="text/javascript"> window.onload = function() { alert("hello"); } </script> window.onload=函数（）{ 警惕（“你好”）； } 对于iFrame的头部或主体，永远不会执行代码。这是我当前的代码： 将代码注入iFram

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

编辑器中的代码

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


window.onload=函数（）{
警惕（“你好”）；
}
对于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);
});

<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>

$（“#btnRun”）。单击（函数（事件）{
event.preventDefault（）；
//id为“预览”的iFrame
var preview=$（“#preview”）.contents（）；
//从编辑器中获取代码并封装在标记中
var script=”“+ace.edit（“js编辑器”）.getSession（）.getValue（）+“”；
//将代码附加到头部或身体，在本例中为头部
preview.find（“head”）.append（脚本）；
});
代码已成功添加到iFrame，但从未执行。我还可以成功地添加HTML/CSS，并将其显示在iFrame中，但从未接触过javascript

我曾尝试仅在编辑器内将代码包装在脚本标记中，并在结束标记上使用转义字符：“”，但没有效果

这是我的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

$("#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 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>


#文件
window.onload=函数（）{
警惕（“你好”）；
}
另外，当从iFrame内调用window.onload或window.top.onload事件时，代码会执行，但只影响包含iFrame的页面，而不会影响iFrame本身的内容

多谢各位

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

我认为您是在触发onload事件后将JS添加到iframe中的

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

可能会有帮助：

我认为您是在启动onload事件后将JS添加到iframe中的

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

可能会有帮助：

我自己能解决这个问题。问题是在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();
});

$（“#btnRun”）。单击（函数（事件）{
event.preventDefault（）；
var previewDoc=window.frames[0]。文档；
var css=ace.edit（“css编辑器”）.getSession（）.getValue（）；
var script=ace.edit（“js编辑器”）.getSession（）.getValue（）；
var html=ace.edit（“html编辑器”）.getSession（）.getValue（）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（“+css+”）；
previewDoc.write（“window.onload=function（）{“+script+”}”）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（html）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.close（）；
});
我自己就能解决这个问题。问题是在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();
});

$（“#btnRun”）。单击（函数（事件）{
event.preventDefault（）；
var previewDoc=window.frames[0]。文档；
var css=ace.edit（“css编辑器”）.getSession（）.getValue（）；
var script=ace.edit（“js编辑器”）.getSession（）.getValue（）；
var html=ace.edit（“html编辑器”）.getSession（）.getValue（）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（“+css+”）；
previewDoc.write（“window.onload=function（）{“+script+”}”）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.write（html）；
previewDoc.write（“”）；
previewDoc.write（“”）；
previewDoc.close（）；
});
我认为使用iframe的
contentDocument
属性，然后注入脚本并触发解析器，以便它实际将其解释为JavaScript会更优雅

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

干杯，
Adrian。

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

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

干杯，
Adrian。

将window.onload更改为window.top.onload不会改变结果。执行的javascript似乎只会影响父页面，而不会影响iFrame的内容。您可能是在onload事件触发后插入脚本标记的。那么，为什么不直接插入代码而不将其包装到事件处理程序中呢？我关心的不是它包装在什么事件中，而是如何从iFrame中获取属于iFrame的“窗口”。请参见我的回答：将window.onload更改为window.top.onload不会改变结果。执行的javascript似乎只会影响父页面，而不会影响iFrame的内容。您可能是在onload事件触发后插入脚本标记的。那么，为什么不简单地插入代码而不将其包装在事件处理程序中呢？我关心的不是它包装在什么事件中，而是如何从iFrame中获取属于iFrame的“窗口”。请看我的回答：我认为你是对的，我现在就试试。但是当我在定义window.onload之后调用它时