Jef*_*ang 48 javascript iframe jquery
我有这样的事情:
<html>
<body>
<iframe id="someFrame"></iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我想使用jQuery编写元素,以便完全等效的HTML将是这样的:
<html>
<body>
<iframe id="someFrame">
<!-- inside the iframe's content -->
<!-- <html><body> -->
<div>A</div>
<div>B</div>
<div>C</div>
<!-- </body></html> -->
</iframe>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
或者,任何普通的Javascript都可以.
谢谢.
编辑:经过一些研究,似乎我正在寻找一个IE等效的iframe的contentDocument属性."contentDocument"是FF支持的W3C标准,但IE不支持.(惊喜)
Mik*_*son 88
你可以做到这两点,你只需要有不同的目标:
var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
Run Code Online (Sandbox Code Playgroud)
Jef*_*ang 36
经过一些研究,以及迈克的确凿答案,我发现这是一个解决方案:
var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
d.open(); d.close(); // must open and close document object to start using it!
// now start doing normal jQuery:
$("body", d).append("<div>A</div><div>B</div><div>C</div>");
Run Code Online (Sandbox Code Playgroud)
有两种可靠的方法可以访问document内部的元素iframe:
var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
Run Code Online (Sandbox Code Playgroud)
var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
Run Code Online (Sandbox Code Playgroud)
我在这里走出困境并建议到目前为止提出的答案是不可能的.
如果这个iframe实际上有一个src ="somepage.html"(你应该指出,如果没有,那么使用iframe是什么意思?),那么我不认为Jquery可以在所有浏览器中跨框架直接操作html .根据我对这种事情的经验,包含页面不能直接调用函数或与iframe页面进行任何类型的Javascript联系.
您的"somepage.html"(在iframe中加载的页面)需要做两件事:
例如,somepage.html可能如下所示:
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge={
setHtml:function(htm) {
document.body.innerHTML=htm;
}
}
$(function() { parent.setBridge(bridge); });
//--></script>
</head>
<body></body>
</html>
Run Code Online (Sandbox Code Playgroud)
并且包含的页面可能如下所示:
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
bridge=br;
bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
}
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>
Run Code Online (Sandbox Code Playgroud)
这可能看起来有点令人费解,但它可以在多个方向上进行调整,至少可以在IE,FF,Chrome以及Safari和Opera中使用......