为什么一个附加 to a dynamically created seem to run the

我试图创建一个<iframe>使用JavaScript，然后附加一个<script>元素到<IFRAME>，我想在<IFRAME> d文档的上下文中运行。

不幸的是，似乎我做错了 - 我的JavaScript似乎成功执行，但在<script>的上下文是父页面，而不是<IFRAME> d文档。我还得到在Firebug的“网络”选项卡301错误时，浏览器请求iframe_test.js，但它再次（不知道为什么？）成功地请求它。

这是我使用的（在现场演示代码http://onespot.wsj.com/static/iframe_test.html ）：

iframe_test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>&lt;iframe&gt; test</title>
  </head>
  <body>
    <div id="bucket"></div>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#bucket').append('<iframe id="test"></iframe>');
        setTimeout(function() {
          var iframe_body = $('#test').contents().find('body');
          iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>');
        }, 100);
      });
    </script>
  </body>
</html>

iframe_test.js

$(function() {
  var test = '<p>Shouldn\'t this be inside the &lt;iframe&gt;?</p>';
  $('body').append(test);
});

这似乎是不寻常的一件事是，在iframe_test.js的代码甚至工作; 我还没有装载的jQuery的<IFRAME>本身，只有父文档英寸这似乎是一个线索，我，但我想不出这是什么意思。

任何意见，建议等，将不胜感激！

Answer 1:

有同样的问题，我花了小时找到解决方案。你只需要使用iframe的文档创建脚本的对象。

var myIframe = document.getElementById("myIframeId");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframe.contentWindow.document.body.appendChild(script);

奇迹般有效！

Answer 2:

我没有找到一个答案，我原来的问题，但我没有发现（我的目的至少）的作品更好的另一种方法。

这不父页面上使用jQuery（这实际上是一件好事，因为我不希望有加载它），但它确实在明显完全有效和实用的方式加载的jQuery在<IFRAME>。我做的是写在与从头开始创建一个新的<IFRAME>的文档对象。这使我简单地包括在字符串中<SCRIPT>元件，其余则写入到<IFRAME>的文档对象。

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>frame</title>
  </head>
  <body>

    <div id="test"></div>

    <script type="text/javascript">
      // create a new <iframe> element
      var iframe = document.createElement('iframe');

      // append the new element to the <div id="bucket"></div>
      var bucket = document.getElementById('test');
      bucket.appendChild(iframe);

      // create a string to use as a new document object
      var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
      val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';

      // get a handle on the <iframe>d document (in a cross-browser way)
      var doc = iframe.contentWindow || iframe.contentDocument;
      if (doc.document) {
        doc = doc.document;
      }

      // open, write content to, and close the document
      doc.open();
      doc.write(val);
      doc.close();
    </script>

  </body>
</html>

我希望这可以帮助别人的道路！

Answer 3:

答案原来的问题很简单 - 脚本的执行是由jQuery的完成，因为jQuery是在顶部框架加载，这是脚本运行，其中也不管你在哪里追加它。更智能的实现的jQuery无疑可以进行使用正确的窗口对象，但现在事情会如何。

至于解决方法，你已经有两个很好的答案（即使一个是你自己）。我想补充的是，你可以使用这些解决方法之一，包括在iframe的jquery.js，然后拿到jQuery对象，而不是一个顶部插入你额外的标记......但很可能是矫枉过正了。

文章来源: Why does appending a