如何在 Javascript 中获得 iframe 的主体内容？

小开

我认为在标签之间放置文本是为那些不能处理 iframe 的浏览器保留的。

<iframe src ="html_intro.asp" width="100%" height="300">
<p>Your browser does not support iframes.</p>
</iframe>

您可以使用‘ src’属性设置 iframe html 的源代码..。

希望这对 :)有帮助

小开

Chalkey 是正确的，您需要使用 src 属性来指定将包含在 iframe 中的页面。如果您这样做了，并且 iframe 中的文档与父文档位于同一域中，那么您可以使用以下方法:

var e = document.getElementById("id_description_iframe");
if(e != null) {
alert(e.contentWindow.document.body.innerHTML);
}

显然，您可以对这些内容做一些有用的事情，而不仅仅是将它们放在一个警报中。

小开

AFAIK，Iframe 不能这样使用。您需要将其 src 属性指向另一个页面。

下面是如何使用旧的 javascript 获得它的主体内容。

function getFrameContents(){
var iFrame =  document.getElementById('id_description_iframe');
var iFrameBody;
if ( iFrame.contentDocument )
{ // FF
iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
}
else if ( iFrame.contentWindow )
{ // IE
iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
}
alert(iFrameBody.innerHTML);
}

小开

使用 JQuery，试试这个:

$("#id_description_iframe").contents().find("body").html()

小开

下面的代码是跨浏览器兼容的。它适用于 IE7、 IE8、 Fx3、 Safari 和 Chrome，因此不需要处理跨浏览器问题。没有在 IE6中测试。

<iframe id="iframeId" name="iframeId">...</iframe>


<script type="text/javascript">
var iframeDoc;
if (window.frames && window.frames.iframeId &&
(iframeDoc = window.frames.iframeId.document)) {
var iframeBody = iframeDoc.body;
var ifromContent = iframeBody.innerHTML;
}
</script>

小开

在 iframe 中与 JS 一起使用 content:

document.getElementById('id_iframe').contentWindow.document.write('content');

小开

对我来说很有效:

document.getElementById('iframe_id').contentWindow.document.body.innerHTML;

小开

确切的问题是如何使用纯 JavaScript 而不是 jQuery 来实现。

但是我总是使用可以在 jQuery 源代码中找到的解决方案。这只是一行本地 JavaScript。

对我来说，它是最好的，易于阅读，甚至 Afaik最短的方式获得 iframe 内容。

首先拿到你的 iframe

var iframe = document.getElementById('id_description_iframe');


// or
var iframe = document.querySelector('#id_description_iframe');

然后使用 jQuery 的解决方案

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

它甚至可以在 Internet Explorer 中工作，在 iframe对象的 contentWindow属性期间执行这个操作。大多数其他浏览器使用 contentDocument属性，这就是为什么我们首先在 OR 条件下证明这个属性的原因。如果未设置，请尝试 contentWindow.document。

在 iframe 中选择元素

然后，您通常可以使用 getElementById()或甚至 querySelectorAll()从 iframeDocument中选择 DOM-Element:

if (!iframeDocument) {
throw "iframe couldn't be found in DOM.";
}


var iframeContent = iframeDocument.getElementById('frameBody');


// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

在 iframe 中调用函数

只从 iframe获取 window元素来调用一些全局函数、变量或整个库(例如 jQuery) :

var iframeWindow = iframe.contentWindow;


// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');


// or
iframeContent = iframeWindow.$('#frameBody');


// or even use any other global variable
iframeWindow.myVar = window.myVar;


// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

注意

如果你观察同一原产地政策，这一切都是可能的。

小开

要从 javascript 获得 body 内容，我尝试了以下代码:

var frameObj = document.getElementById('id_description_iframe');


var frameContent = frameObj.contentWindow.document.body.innerHTML;

其中“ id _ description _ iframe”是 iframe 的 id。这个代码对我来说没问题。

小开

您可以在一行代码中获得 iframe 主体的内容:

document.getElementsByTagName('iframe')[0].contentWindow.document.body.innerText;

小开

如果您不仅想选择 iframe 的主体，而且还想向其中插入一些内容，并且使用纯 JS，不使用 JQuery，不使用 document.write () ，那么我有一个没有其他答案提供的解决方案。

您可以使用以下步骤

1. 选择你的 iframe:

var iframe = document.getElementById("adblock_iframe");

2. 创建一个要插入到框架中的元素，比方说一个图像:

var img = document.createElement('img');
img.src = "https://server-name.com/upload/adblock" + id + ".jpg";
img.style.paddingLeft = "450px";
//scale down the image is we have a high resolution screen on the client side
if (retina_test_media == true && high_res_test == true) {
img.style.width = "200px";
img.style.height = "50px";
} else {
img.style.width = "400px";
img.style.height = "100px";
}
img.id = "image";

3. 将图像元素插入 iframe:

iframe.contentWindow.document.body.appendChild(img);