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 元素?