如何使用Javascript设置iframe的内容？

问题描述 投票：0回答：10

我有以下 HTML 结构。

<iframe id="myiframe" src='myiframeContent.html'></iframe>

我有以下带有 HTML 字符串的 JavaScript 变量：

var s ="<html><head></head><body><div>Test_Div</div></body></html>";

如何使用变量 

myiframe
更改 id 
s
的 iframe 内容？

javascript jquery html iframe
10个回答
131
投票

我成功做到了

var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);
30
投票

使用“内容”功能：

$('#some-id').contents().find('html').html("some-html")

相关小提琴：http://jsfiddle.net/fDFca/

27
投票

我需要重复使用相同的 iframe 并每次替换内容。我尝试了几种方法，这对我有用：

// Set the iframe's src to about:blank so that it conforms to the same-origin policy 
iframeElement.src = "about:blank";

// Set the iframe's new HTML
iframeElement.contentWindow.document.open();
iframeElement.contentWindow.document.write(newHTML);
iframeElement.contentWindow.document.close();

这里它是一个函数：

function replaceIframeContent(iframeElement, newHTML)
{
    iframeElement.src = "about:blank";
    iframeElement.contentWindow.document.open();
    iframeElement.contentWindow.document.write(newHTML);
    iframeElement.contentWindow.document.close();
}
26
投票

统一解决方案：

为了在所有现代浏览器上工作，您需要两个步骤：

  1. 添加 

    javascript:void(0);
    作为 iframe 元素的 
    src
    属性。否则内容将被 Firefox 上的空 
    src
    覆盖。

    <iframe src="javascript:void(0);"></iframe>

  2. 以编程方式更改内部 

    html
    元素的内容。

    $(iframeSelector).contents().find('html').html(htmlContent);

学分：

@susan 的评论（链接）的第 1 步

@erimerturk 和 @x10 解决方案的第 2 步（link1、link2

）
13
投票

您希望使用 iframe 的 

srcdoc
属性（MDN 文档）。

var html_string = "<html><body><h1>My epic iframe</p></body></html>";
document.querySelector('iframe').srcdoc = html_string;

使用此方法的好处是，与本页列出的 Red 方法相比，使用 

srcdoc
添加的 iframe 内容被视为同源。如果您愿意，这样就可以继续使用 JavaScript 操作和访问 iframe。

9
投票
$('#myiframe').contents().find('html').html(s);

您可以从这里查看http://jsfiddle.net/Y9beh/

7
投票

使用Blob：

var s ="<html><head></head><body><div>Test_Div</div></body></html>";
var iframe = document.getElementById("myiframe");
var blob = new Blob([s], {type: "text/html; charset=utf-8"});
iframe.src = URL.createObjectURL(blob);
4
投票

为什么不使用

$iframe.load(function () {
    var $body = $('body', $iframe.get(0).contentWindow.document);
    $body.html(contentDiv);
});

而不是计时器？

2
投票

你需要 - 

var $frame = $('myiframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<div>Test_Div</div>');
    }, 1 );

代码取自 - 将 html 放入 iframe 中（使用 javascript）

0
投票

如果您想将包含脚本标签的 html 内容设置为 iframe，您可以访问您创建的 iframe：

$(iframeElement).contentWindow.document

所以你可以在其中设置任何元素的innerHTML。

但是，对于脚本标签，您应该创建并附加一个脚本标签，如下所示：

https://stackoverflow.com/a/13122011/4718434

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.