如何在Javascript中获取iframe的内容?

2020/11/01 03:23 · javascript ·  · 0评论
<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/>

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

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

对我来说,这是获取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中也可以使用,Internet ExplorercontentWindowiframe对象属性期间执行此操作大多数其他浏览器都使用该contentDocument属性,这就是我们在此OR条件下首先证明此属性的原因。如果未设置,请尝试contentWindow.document

在iframe中选择元素

然后,您通常可以使用getElementById()甚至querySelectorAll()选择iframeDocument

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 /*, ... */);

注意

如果遵守同源策略,则所有这一切都是可能的

使用JQuery,请尝试以下操作:

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

它非常适合我:

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

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

content在JS与iframe中一起使用

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

我认为在标记之间放置文字是为无法处理iframe的浏览器保留的。

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

您可以使用'src'属性设置iframe html的来源...

希望有帮助:)

以下代码是跨浏览器兼容的。它可以在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>

Chalkey是正确的,您需要使用src属性来指定要包含在iframe中的页面。如果您执行此操作,并且iframe中的文档与父文档位于同一域中,则可以使用以下方法:

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

显然,您可以对内容进行一些有用的操作,而不仅仅是将其置于警报中。

为了从javascript获取正文,我尝试了以下代码:

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

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

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

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhonghuoquiframedeneirong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!