Javascript iframe中的脚本标记在父dom上执行_Javascript_Jquery_Html_Dom_Iframe

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

javascript jquery html dom iframe

Javascript iframe中的脚本标记在父dom上执行,javascript,jquery,html,dom,iframe,Javascript,Jquery,Html,Dom,Iframe,我在iframe中编写jQuery脚本以将h1隐藏在iframe中 <iframe id = "preview" width="800" height="500"> </iframe> <script> var H = "<html><head><script>$(\'#hh\').toggle();<"; H+= "/script></head><body><h1 id=

我在iframe中编写jQuery脚本以将h1隐藏在iframe中

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


var H=“$（\”\hh\）.toggle（）；JavaScript”；
var previewFrame=document.getElementById（“预览”）；
var preview=previewFrame.contentDocument | | previewFrame.contentWindow.document；
preview.open（）；
预览、写入（H）；
preview.close（）；

但是，脚本无法看到iframe中的元素。当我将id='hh'的元素移出iframe时，脚本就工作了。

看起来您试图在iframe中使用jQuery来处理要放入iframe的脚本，但在iframe中没有jQuery。iframe是一个完全不同的执行上下文。如果要在其中使用jQuery，必须在其中加载jQuery

此外，您不能运行试图从

元素修改DOM的脚本。DOM尚未加载。您必须将该脚本移动到

中的内容之后（例如，就在

之前），或者使用

$（document）.ready（…）

在DOM就绪后运行脚本

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

如果要在iframe中使用jQuery，则需要在iframe中使用jQuery

必须使用单独的

标记来加载jQuery。不能在同一标记中同时使用

.src

和内联脚本

必须使用正确的

$（document）.ready（function（）{your code here}）

语法

您必须将JS字符串中的

和

分开，以便浏览器不会像

那样对其进行解释

这对我很有用：

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();

var H='JavaScript'；
H+=''；
H+='$（文档）.ready（函数（）{'；
H+='$（“#hh”）.hide（）；'；
H+='}）；'；
H+=''；
var previewFrame=document.getElementById（“预览”）；
var preview=previewFrame.contentDocument | | previewFrame.contentWindow.document；
preview.open（）；
预览、写入（H）；
preview.close（）；

我已经分解了您的

变量，使其更可读，更容易发现错误

工作演示：

仅供参考，这样做很痛苦。在JS中创建完整的HTML文档很容易出错。

我尝试过，但不起作用，此外，当脚本将h1隐藏在iFrame之外时，它也能起作用。我确实加载了它，同样的事情happens@MuhammadSultan-查看我在回答中添加的附加问题。我这样做了：var H=“JavaScript$document.ready（$（\''hh\'））.hide（）；”但它不起作用too@MuhammadSultan-你的脚本标签搞乱了。加载jQuery的

标记必须是它自己的脚本标记。如果在

标记上有

src=xxx

，则脚本标记中不能有内容。因此，您需要两个

标记，一个用于加载jQuery，另一个用于运行脚本。