iframe 中的脚本标记在父 dom 上执行答案

【问题标题】：Script tag inside iframe executes on parent domiframe 中的脚本标记在父 dom 上执行
【发布时间】：2014-07-25 11:57:56
【问题描述】：

我在 iframe 中编写 jQuery 脚本来隐藏 iframe 中的 h1

<iframe id = "preview" width="800" height="500">   
</iframe>

 <script>
var H = "<html><head><script>$(\'#hh\').toggle();<";
H+= "/script></head><body><h1 id='hh'>JavaScript</h1></body></html>";

 var previewFrame = document.getElementById("preview");
 var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
 preview.open();
 preview.write(H);
 preview.close();
  </script>

但是，脚本看不到 iframe 中的元素。当我将 id='hh' 的元素移出 iframe 时，脚本可以工作。

【问题讨论】：

标签： javascript jquery html dom iframe

【解决方案1】：

看起来您正尝试在 iframe 中使用 jQuery 来为您放入 iframe 中的脚本，但 iframe 中没有 jQuery。 iframe 是一个完全不同的执行上下文。如果你想在那里使用 jQuery，你必须在那里加载 jQuery。

此外，您不能运行尝试从 <head> 元素修改 DOM 的脚本。 DOM 尚未加载。您必须将该脚本移到 <body> 中的内容之后（例如，就在 </body> 之前），或者在 DOM 准备好之后使用 $(document).ready(...) 运行脚本。

好的，这是我发现的问题的总和：

如果要在 iframe 中使用 jQuery，则需要在其中使用它。
您必须使用单独的<script> 标签来加载jQuery。您不能在同一标记中同时使用 .src 和内联脚本。
您必须使用正确的$(document).ready(function() { your code here}) 语法。
您必须将 JS 字符串中的 <script> 和 </script> 分开，这样浏览器就不会像 '<scr' + 'ipt>' 那样解释它。

这对我有用：

var H = '<html><body><h1 id="hh">JavaScript</h1>';
H += '<scr' + 'ipt src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr' + 'ipt>';
H += '<scr' + 'ipt>$(document).ready(function() {';
H += '$("#hh").hide();';
H += '});</scr' + 'ipt>';
H += '</body></html>';

var previewFrame = document.getElementById("preview");
var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
preview.open();
preview.write(H);
preview.close();

我已经分解了您的 H 变量，使其更具可读性和更容易发现错误。

工作演示：http://jsfiddle.net/jfriend00/8L3KT/

仅供参考，这是一种痛苦的方式。在 JS 中创建完整的 HTML 文档很容易出错。

【讨论】：

我试过了，但它不起作用，此外，当脚本在 iframe 之外隐藏 h1 时它也起作用
我确实加载了它并且发生了同样的事情
@MuhammadSultan - 请参阅我添加到答案中的附加问题。
我这样做了：var H = "
JavaScript
@MuhammadSultan - 你的脚本标签搞砸了。加载 jQuery 的 <script> 标签必须是它自己的脚本标签。如果<script> 标记上有src=xxx，则脚本标记中不能有内容。因此，您将需要两个 <script> 标签，一个用于加载 jQuery，一个用于运行您的脚本。