Javascript iframe innerHTML

时间:2008-09-26 12:30:04

标签: javascript iframe innerhtml

有没有人知道如何从IFRAME中获取HTML我已尝试过几种不同的方法:

document.getElementById('iframe01').contentDocument.body.innerHTML
document.frames['iframe01'].document.body.innerHTML
document.getElementById('iframe01').contentWindow.document.body.innerHTML

10 个答案:

答案 0 :(得分:15)

我认为这就是你想要的:

window.frames['iframe01'].document.body.innerHTML 

修改

我有充分的权威,这在Chrome和Firefox中不起作用,尽管它在IE中完美运行,这是我测试它的地方。回想起来,这是一个很大的错误

这将有效:

window.frames[0].document.body.innerHTML 

我知道这不是所要求的,但不想删除答案,因为我认为它有一个地方。

我喜欢@ ravz的jquery答案。

答案 1 :(得分:11)

有类似下面的内容可行。

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = document.getElementById(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }

答案 2 :(得分:8)

如果您查看JQuery,可以执行以下操作:

<iframe id="my_iframe" ...></iframe>

$('#my_iframe').contents().find('html').html();

由于Javascript中的Same Origin Policy,这假设您的iframe父级和子级驻留在同一台服务器上。

答案 3 :(得分:5)

康罗伊的回答是正确的。如果您只需要来自body标签的内容,请使用:

$('#my_iframe').contents().find('body').html();

答案 4 :(得分:2)

不要忘记,由于安全性,您无法跨域。

因此,如果是这种情况,您应该使用JSON

答案 5 :(得分:2)

您可以将contentDocument或contentWindow属性用于此目的。 这是示例代码。

function gethtml()
{
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
alert(y.body.innerHTML);
}

此处,我的框架是您的iframe的ID。 注意:您无法从域外的src中提取iframe中的内容。

答案 6 :(得分:1)

document.getElementById('iframe01').outerHTML

答案 7 :(得分:1)

如果在Firefox上安装ForceCORS过滤器,则可以从其他域获取源。当您打开此过滤器时,它将绕过浏览器中的安全功能,即使您尝试阅读其他网页,您的脚本也会正常工作。例如,您可以在iframe中打开FoxNews.com,然后阅读其来源。现代Web brwosers默认拒绝此功能的原因是因为如果其他域包含一段JavaScript并且您正在阅读并在页面上显示它,则它可能包含恶意代码并构成安全威胁。因此,只要您在页面上显示来自其他域的数据,就必须注意这一真正的威胁,并实施一种方法,在您开始显示之前从文本中过滤掉所有JavaScript代码。请记住,当假定的原始文本包含脚本标记中包含的一些代码时,当您在页面上显示它们时,它们不会显示,但它们会运行!所以,意识到这是一种威胁。

http://www-jo.se/f.pfleger/forcecors

答案 8 :(得分:1)

此解决方案与iFrame相同。我创建了一个PHP脚本,可以从其他网站获取所有内容,而最重要的部分是您可以轻松地将自定义jQuery应用于该外部内容。请参考以下脚本,该脚本可以从其他网站获取所有内容,然后您也可以应用自定义jQuery / JS。此内容可以在任何元素或任何页面内的任何位置使用。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

答案 9 :(得分:-1)

您可以使用此代码从iframe中获取html iframe = document.getElementById('frame'); innerHtml = iframe.contentDocument.documentElement.innerHTML