Question

我在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 =＆＃39; hh＆＃39;移动元素时在iframe之外，脚本可以工作。

Answer 1

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

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

好的，这是我找到的问题的总和：

如果你打算在那里使用它，你需要在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中的脚本标记在父dom上执行

1 个答案: