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

IT技术 javascript jquery iframe
2021-02-10 06:47:40

我有这样的事情：

<!doctype html>
<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

我想使用 jQuery 来编写元素，使完整的等效 HTML 如下所示：

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

或者，任何普通的旧 Javascript 都可以。

谢谢。

编辑：经过更多研究，似乎我正在寻找 iframe 的 contentDocument 属性的 IE 等效项。“contentDocument”是 FF 支持的 W3C 标准，但 IE 不支持。（惊喜惊喜）

5个回答

你可以两者都做，你只需要有不同的目标：

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
啊哈 - 内容窗口。我实际上发现开始使用jquery需要打开和关闭......
2021-03-14 06:47:40
这种方法不再有效。我收到 js 错误，指出不安全的 JavaScript 尝试从 URL“URL2”的框架中访问 URL“URL1”的框架。域、协议和端口必须匹配。下面给出的桥梁方法确实可以正常工作。
2021-03-26 06:47:40
如果没有 close() 语句，则不会执行所有后续 JS，因此使用 try finally 块是有意义的。谢谢。这个答案帮助我弄清楚我的页面有什么问题
2021-03-29 06:47:40
为什么不能直接写入 iframe 的主体，而只能使用此 hack？
2021-04-05 06:47:40
我知道这是一个旧线程，但在什么情况下你会拥有ifrm.contentDocument.document.document？
2021-04-11 06:47:40

经过一番研究，以及迈克的确凿回答，我发现这是一个解决方案：

  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>");
有趣的。你知道为什么要打开和关闭吗？
2021-03-20 06:47:40
这太棒了！谢谢杰夫！
2021-04-10 06:47:40
这是我在使用 codemirrors 时遇到的问题的完美解决方案editor.getValue()！
2021-04-12 06:47:40

有两种可靠的方法可以访问 a 中的document元素iframe：

1. window.frames属性：

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

演示


2. contentDocument属性：

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

演示

完美，JSFiddle 非常有帮助。谢谢！
2021-04-02 06:47:40

我在这里冒险并建议到目前为止提出的答案是不可能的。

如果这个 iframe 实际上有一个 src="somepage.html"（你应该已经指出，如果没有，使用 iframe 有什么意义？），那么我不认为 Jquery 可以直接在所有浏览器中跨帧操作 html . 根据我对这种事情的经验，包含页面不能直接从 iframe 页面调用函数或与 iframe 页面进行任何类型的 Javascript 接触。

您的“somepage.html”（在 iframe 中加载的页面）需要做两件事：

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

例如， somepage.html 可能如下所示：

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

包含页面可能如下所示：

<!doctype html>
<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>

这可能看起来有点令人费解，但它可以在许多方向上进行调整，并且至少应该在 IE、FF、Chrome 以及可能的 Safari 和 Opera 中工作......

有什么理由需要使用 iframe 而不是 div 吗？似乎 div 会更容易，并且不太可能在浏览器中崩溃。
2021-03-15 06:47:40
事实证明，这是有原因的。您需要放置外部 javascript 并且不希望它损坏您的页面。但是您还需要引用来匹配您的顶级域。这是在页面上放置广告的最常用方法：<iframe></iframe> + document.write('<script tags go here>')
2021-04-05 06:47:40
感谢您的回答 - 但我想使用这个 iframe 像富文本编辑器一样编写 HTML。我没有设置 src 属性，因为它将被清除并从“顶部”窗口重新组合。另外 - 我认为必须有可能进入孩子的 DOM - 请参阅我在 OP 中的编辑。
2021-04-12 06:47:40

我发现这是跨浏览器兼容的......以前答案的一点交叉和我自己的一些试验和错误。:)

我正在使用它来下载报告，或者，如果发生错误（消息），它会显示在 iFrame 中。大多数用户可能会隐藏 iFrame，我正在使用它多功能。

问题是每次单击报告下载按钮时我都必须清除 iFrame 的内容 - 用户可以更改参数，但碰巧没有结果然后作为消息显示在 iFrame 中。如果有结果，内嵌框架仍然为空-因为下面的代码已经清除了它和window.open(...)方法生成一个Content-Disposition: attachment;filename=...文件。

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

我没有支持的浏览器，contentDocument但我已经这样编码了，所以我要离开它了。也许有人拥有较旧的浏览器并且可以发布兼容性确认/问题？

其它你可能感兴趣的问题
上一篇如何使用 jQuery 选择下拉选项？ 下一篇在节点module名称中使用@ 符号