iframe 中的脚本标记在父 dom 上执行
Posted
技术标签:
【中文标题】iframe 中的脚本标记在父 dom 上执行【英文标题】：Script tag inside iframe executes on parent dom 【发布时间】：2014-07-25 11:57:56 【问题描述】：我在 iframe 中编写 jQuery 脚本来隐藏 iframe 中的 h1
<iframe id = "preview" >
</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 时，脚本可以工作。
【问题讨论】：
【参考方案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，一个用于运行您的脚本。以上是关于iframe 中的脚本标记在父 dom 上执行的主要内容，如果未能解决你的问题，请参考以下文章
为啥自关闭 iframe 标记会阻止显示更多 DOM 元素？