Muh*_*tan 5 html javascript iframe jquery dom
我在 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 时，脚本可以工作。
看起来您正在尝试在 iframe 中使用 jQuery 来执行要放入 iframe 中的脚本，但 iframe 中没有 jQuery。iframe 是一个完全不同的执行上下文。如果你想在那里使用 jQuery，你必须在那里加载 jQuery。
此外，您无法运行尝试从<head>元素修改 DOM 的脚本。DOM 尚未加载。您必须将该脚本移到 中的内容之后<body>（例如，就在 之前</body>），或者$(document).ready(...)在 DOM 准备好之后运行该脚本。
好的，这是我发现的问题的总和：
<script>标签来加载 jQuery。您不能.src在同一标记中同时使用内联脚本和内联脚本。$(document).ready(function() { your code here})语法。<script> and </script> that is in your JS string so the browser doesn't interpret it like '<scr' + 'ipt>'.This works for me:
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();
I've broken up your H variable to make it more readable and easier to spot errors.
Working demo: http://jsfiddle.net/jfriend00/8L3KT/
FYI, this is the painful way to do this. Creating a full HTML document in JS is easy to make mistakes with.