使用Javascript或jQuery将元素写入子iframe

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)

  • 啊哈 - contentWindow.我实际上发现打开和关闭是开始使用jquery所必需的... (2认同)

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)

  • 有趣.你知道为什么你要打开和关闭吗? (13认同)

Mor*_*ori 9

有两种可靠的方法可以访问document内部的元素iframe:

1. window.frames属性:

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;
Run Code Online (Sandbox Code Playgroud)

演示


2. contentDocument属性:

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;
Run Code Online (Sandbox Code Playgroud)

演示


jwl*_*jwl 7

我在这里走出困境并建议到目前为止提出的答案是不可能的.

如果这个iframe实际上有一个src ="somepage.html"(你应该指出,如果没有,那么使用iframe是什么意思?),那么我不认为Jquery可以在所有浏览器中跨框架直接操作html .根据我对这种事情的经验,包含页面不能直接调用函数或与iframe页面进行任何类型的Javascript联系.

您的"somepage.html"(在iframe中加载的页面)需要做两件事:

  1. 将某种对象传递给可用作桥的包含页面
  2. 具有根据需要设置HTML的功能

例如,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中使用......