Javascript 为什么附加a<；脚本>；到动态创建的<；iframe>；是否在父页面中运行脚本？_Javascript_Jquery_Dynamic_Iframe_Parent

Javascript 为什么附加a<；脚本>；到动态创建的<；iframe>；是否在父页面中运行脚本？

javascript jquery dynamic iframe

Javascript 为什么附加a<；脚本>；到动态创建的<；iframe>；是否在父页面中运行脚本？,javascript,jquery,dynamic,iframe,parent,Javascript,Jquery,Dynamic,Iframe,Parent,我试图使用JavaScript创建一个脚本，然后在其上附加一个元素，我希望在d文档的上下文中运行该元素不幸的是，我似乎做错了什么-我的JavaScript似乎执行成功，但的上下文是父页面，而不是d文档。当浏览器请求iframe_test.js时，Firebug的“Net”选项卡中也出现了301错误，尽管它随后再次成功请求（不确定为什么？）这是我正在使用的代码（现场演示）： iframe\u test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

我试图使用JavaScript创建一个脚本，然后在其上附加一个元素，我希望在d文档的上下文中运行该元素

不幸的是，我似乎做错了什么-我的JavaScript似乎执行成功，但的上下文是父页面，而不是d文档。当浏览器请求iframe_test.js时，Firebug的“Net”选项卡中也出现了301错误，尽管它随后再次成功请求（不确定为什么？）

这是我正在使用的代码（现场演示）：

iframe\u 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测试
$（文档）.ready（函数（）{
$（'#bucket'）。追加（''）；
setTimeout（函数（）{
var iframe_body=$（'#test'）.contents（）.find（'body'）；
iframe_body.append（“”）；
}, 100);
});

iframe_test.js

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

$（函数（）{
var test='这不应该在iframe内部吗？'；
$（'body'）。追加（测试）；
});

一件看起来不寻常的事情是，iframe_test.js中的代码甚至可以工作；我没有在中加载jQuery本身，只是在父文档中加载。这对我来说似乎是个线索，但我不明白它的意思

如有任何想法、建议等，将不胜感激

我没有找到我最初问题的答案，但我找到了另一种更有效的方法（至少就我的目的而言）

这并没有在父页面上使用jQuery（这实际上是一件好事，因为我不希望在那里加载它），但它确实以一种显然完全有效和可用的方式加载jQuery。我所做的就是用一个从头创建的新对象在的document对象上进行写入。这允许我简单地在字符串中包含一个元素，然后将其写入的文档对象

守则：

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


框架
//创建新元素
var iframe=document.createElement（'iframe'）；
//将新元素附加到
var bucket=document.getElementById（'test'）；
bucket.appendChild（iframe）；
//创建用作新文档对象的字符串
var-val=''；
val+='$（function（）{$（“body”）.append（“It works！”；}）；'；
//获取d文档的句柄（以跨浏览器方式）
var doc=iframe.contentWindow | | iframe.contentDocument；
如果（单据文件）{
doc=doc.doc；
}
//打开、写入内容和关闭文档
doc.open（）；
文件写入（val）；
doc.close（）；

我希望这对以后的人有所帮助

也有同样的问题，我花了几个小时才找到解决方案。您只需要使用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);

工作起来很有魅力

原始问题的答案很简单——脚本的执行是由jquery完成的，因为jquery加载在顶部框架中，所以无论您在哪里添加它，脚本也会在这里运行。毫无疑问，jquery的更智能实现可以使用正确的窗口对象，但目前情况就是这样

至于解决办法，你已经有了两个很好的答案（即使其中一个是你自己的）。我要补充的是，您可以使用其中一种变通方法将jquery.js包含在iframe中，然后获取jquery对象而不是顶部的对象来插入额外的标记。。。但这可能也太过分了。

可能与元素本身是在父文档中构造的这一事实有关。您是否尝试过向子文档添加脚本块，该脚本块在执行时将其“src”属性设置为要加载的实际文件？这是为了防止跨站点脚本编写。如果你能以你正在尝试的方式将脚本注入另一个站点，那么你可以将脚本从任何iframe容器注入任何网站，而不会出现问题。我认为“同一域”规则会阻止在iframe中的文档中添加任何内容。但是，如果文档来自同一域，则规则不适用。@Pointy-非常感谢您的输入。你的想法听起来似乎可行——我尝试了一下，但没有成功（尽管这并不意味着它不是一个有效的解决方案）。最后，我在下面的回答中使用了代码，这对于我来说是一个更优雅的解决方案。@Nissan Fan-感谢您的反馈。然而，Pointy是正确的——因为它是在与父页面相同的域中创建的，所以每个页面都可以访问另一个页面的DOM。你说的绝对正确，一个与父页面位于不同域的页面。这正是我要寻找的。有没有什么方法可以附加到iframe中，这样主体内容就不会被删除？为什么写

@user2284570：浏览器会逐字解释内联
标记中的任何HTML字符串，比如var endScript=''
将被解释为当前脚本的过早结束标记，从而导致语法错误。在iFrame中粘贴包含脚本标记的整个html内容时确实有帮助，但这有缺点，因为doc.write
仅在加载整个页面时才开始写入。太棒了。。。从几个小时开始做同样的事情。。。修好了吗now@user2284570有没有一种跨域的方法？@StanJames:Dunno，但这通常会导致跨AJAX而不需要ᴄᴏʀꜱ.@斯坦詹姆斯跨域iframes是完全不同的球类游戏。即使有解决方案，浏览器也会很快找到它们的路径。这是一种安全功能，可以防止坏人入侵您的银行密码等。顺便说一句，为了浏览器兼容性，我建议在内容窗口中使用此功能：var doc=iframe.contentDocument？iframe.contentDocument：（iframe.contentWindow？iframe.contentWindow）。