如何获取JavaScript中的iframe的内容?

<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/> 

8 Solutions collect form web for “如何获取JavaScript中的iframe的内容?”

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

我总是使用可以在jQuery的源代码中find的解决scheme。 这只是一条线和纯粹的JavaScript。

对我而言,这是获取iframe内容的最佳方式,也是最短的方法。

首先得到你的iframe:

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

然后使用jQuery的解决scheme:

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

它甚至可以在IE浏览器中工作,在iframe对象的contentWindow属性期间,IE浏览器contentWindow 。 大多数其他浏览器使用contentDocument属性,这就是为什么我们在这个OR条件中首先certificate这个属性的原因。 如果没有设置,请尝试contentWindow.document

然后,您通常可以使用getElementById()或甚至querySelectorAll()iframeDocumentselectDOM元素:

 var iframeContent; if (iframeDocument) { iframeContent = iframeDocument.getElementById('frameBody'); // or iframeContent = iframeDocument.querySelectorAll('#frameBody'); } 

调用iframe中的函数

iframe获取window元素来调用一些全局函数,variables或整个库(例如jQuery ):

 var iframeWindow = iframe.contentWindow; if (iframeWindow) { // 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.inside_iframe_variable = window.outside_iframe_variable; } 

注意

如果你遵守同源政策,所有这一切都是可能的。

使用JQuery,试试这个:

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

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

它适用于我完美:

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

在JS中使用iframe中的content

 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,Fx3,Safari和Chrome,所以不需要处理跨浏览器的问题。 没有在IE6中testing。

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

显然你可以做一些有用的内容,而不是把它们放在一个警报。

  • 获取跨域iframe的DOM内容
  • 不安全的JavaScript尝试访问Google Chrome中的框架
  • 把html放入iframe(使用javascript)
  • 在iframe中打开链接
  • HTML5:Iframe没有滚动?
  • 在iframe中调用javascript函数
  • 删除额外的空白周围的iframe?
  • IE问题:使用JavaScript将表单提交给iframe
  • jQuery。已经在一个dynamic插入的iframe中
  • 如何在移动Safari浏览器中正确显示iFrame
  • 从iframe删除滚动条