Question

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

我想得到的是：

test<br/>

Answer 1

确切的问题是如何使用纯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中工作，它在contentWindow对象的iframe属性中执行此操作。大多数其他浏览器使用contentDocument属性，这就是我们在此OR条件中首先证明此属性的原因。如果未设置，请尝试contentWindow.document。

在iframe中选择元素

然后，您通常可以使用getElementById()甚至querySelectorAll()从iframeDocument中选择DOM元素：

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

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

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

在iframe中调用函数

只获取window中的iframe元素来调用一些全局函数，变量或整个库（例如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 /*, ... */);

注意

如果你观察same-origin policy。
，这一切都是可能的

Answer 2

使用JQuery，试试这个：

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

Answer 3

它对我来说非常适合：

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

Answer 4

AFAIK，iframe不能以这种方式使用。您需要将其src属性指向另一个页面。

以下是使用平面旧javascript获取其正文内容的方法。这适用于IE和Firefox。

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

Answer 5

在iframe中使用content与JS：

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

Answer 6

我认为在标签之间放置文字是为那些无法处理iframe的浏览器保留的，即......

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

您使用'src'属性设置iframes html的源...

希望有助于：）

Answer 7

以下代码符合跨浏览器标准。它适用于IE7，IE8，Fx 3，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>

Answer 8

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

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

显然，您可以对内容做一些有用的事情，而不是仅仅将它们置于警报状态。

Answer 9

要从javascript获取正文内容，我尝试了以下代码：

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

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

其中“ id_description_iframe”是您iframe的ID。这段代码对我来说很好用。

Answer 10

如果您不仅想选择 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);

Answer 11

一行代码即可获取iframe body的内容：

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

如何在Javascript中获取iframe的正文内容？

11 个答案: