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

v440hwme 于 2023-04-19 发布在 Java

关注(0)|答案(5)|浏览(112)

我有这样的东西：

<!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都可以。
谢谢。

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

JavaScript

来源：https://stackoverflow.com/questions/997986/write-elements-into-a-child-iframe-using-javascript-or-jquery

5条答案

按热度按时间

falq053o1#

你可以两者兼得，只不过目标不同而已：

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

赞(0）回复(0）举报 2023-04-19

8aqjt8rx2#

经过一些研究，以及Mike的证实答案，我发现这是一个解决方案：

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

赞(0）回复(0）举报 2023-04-19

3pmvbmvn3#

HTMLIFrameElement：srcdoc属性

HTMLIFrameElement的srcdoc属性指定页面的内容。

document.querySelector("button").addEventListener("click", function() {
  document.querySelector("iframe").srcdoc = "Hello, world!";
});

<iframe></iframe>
<button>Write</button>

赞(0）回复(0）举报 2023-04-19

mbjcgjjk4#

我在这里大胆地说，到目前为止提出的答案是不可能的。
如果这个iframe实际上有一个src=“somepage.html”（你应该已经指出了，如果没有，使用iframe有什么意义呢？），那么我认为Jquery不能在所有浏览器中直接跨框架操作html。根据我对这种事情的经验，包含页面不能直接从iframe页面调用函数或与iframe页面进行任何类型的Javascript接触。
您的“somepage.html”（加载到iframe中的页面）需要做两件事：
1.向包含页面传递某种可用作桥梁的对象
1.有一个函数来设置你想要的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中工作。

赞(0）回复(0）举报 2023-04-19

jhkqcmku5#

我发现这是跨浏览器兼容的......以前的答案和我自己的一些尝试和错误。：）
我用它来下载一个报告，或者，如果发生错误（消息），它会显示在iFrame中。大多数用户可能会隐藏iFrame，我用它的多功能。
问题是每次我点击报告下载按钮时，我都必须清除iFrame的内容-用户可以更改参数，但没有结果，然后在iFrame中显示为消息。如果有 are 结果，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的浏览器，但我已经这样编码了，所以我离开了它。也许有人有旧的浏览器，可以发布兼容性确认/问题？

赞(0）回复(0）举报 2023-04-19

我来回答

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

5条答案

HTMLIFrameElement：srcdoc属性

相关问题

热门标签

最新问答