Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 跨浏览器使用javascript/jQuery获取iframe的内容

跨浏览器使用javascript/jQuery获取iframe的内容

发布时间:2016-09-03   编辑:www.jquerycn.cn
jquery中文网为您提供跨浏览器使用javascript/jQuery获取iframe的内容等资源,欢迎您收藏本站,我们将为您提供最新的跨浏览器使用javascript/jQuery获取iframe的内容资源

是内联框架,允许你单独的文件加载到一个现有的文件。您还可以加载文件的动态“src”属性。假设有一个需要内容和过程使用。下面的例子可以帮助你做,这已经是一个跨浏览器Firefox和IE浏览器的解决方案。

让我们加载一个简单的HTML文件在iFrame,并获得该文件的内容与方法getiframecontent

<html>
 <body>
 <iframe id="testFrame" src="FrameContent.html" >
 </iframe>
<a href="#" onclick="getIframeContent('testFrame');">Get the content of Iframe</a>
 </body>
<script>
 function getIframeContent(frameId){
 var frameObj = document.getElementById(frameId);
 var frameContent = frameObj.contentWindow.document.body.innerHTML;
 alert("frame content : "+frameContent);
 }
 </script>
 </html>

FrameContent.html

<html><body>
 <div id="testFrameContent" style="border:1px;">
 This is simple HTML file which is loaded inside the iframe.
 </div>
 </body>
 </html>

what getIframeContent method do?

function getIframeContent(frameId){
 var frameObj = document.getElementById(frameId);
 var frameContent = frameObj.contentWindow.document.body.innerHTML;
 alert("frame content : "+frameContent);
 }

getElementById(frameid)–让IFrame的对象引用

contentwindow–是一个属性返回iFrame窗口对象

contentwindow.document–返回iFrame窗口文档对象。

contentwindow.document.body.innerhtml–返回的HTML内容iframe体。

你也可以访问任何标签元素在iFrame。这可以由标签名称/标识处理。让我们想象的使用案例:检索在iframe内容div元素。下面的语句将找回它。

 

frameObj.contentWindow.document.getElementById(“testFrameContent”).innerHTML

 获取的方法是怎么样的呢?

使用jquery操作iframe

1 内容里有两个ifame

<iframe id=”leftiframe”…</iframe>
<iframe id=”mainiframe..</iframe>

leftiframe中改变mainiframe的src
$(“#mainframe”,parent.document.body).attr(“src”,””)

2 如果内容里面有一个ID为mainiframe的ifame
<iframe id=”mainifame”…></ifame>
ifame包含一个someID
<div id=”someID”>you want to get this content</div>
得到someID的内容

$(“#mainiframe”).contents().find(“someID”).html() html 或者 $(“#mainiframe”).contains().find(“someID”).text()值

2 如上面所示
leftiframe中的操作mainiframe的内容someID的内容
$(“#mainframe”,parent.document.body).contents().find(“someID”).html()或者 $(“#mainframe”,parent.document.body).contents().find(“someID”).val()

 <body>
      <iframe id="testFrame" src="FrameContent.html" >
 </iframe>
 <button onclick="getiframe();" id="btn">get</button>
 <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
 function getiframe(){
  var content = $("#testFrame").contents().find("#testFrameContent").html();
  alert(content);
}
</script>

您可能感兴趣的文章:
跨浏览器使用javascript/jQuery获取iframe的内容
JavaScript打印iframe内容的方法
php中json的跨域实例分析
js代码获取内联与链接中样式
ie浏览器中取得iframe中内容的方法
js判断当前页面是否被iframe引用的方法
jQuery读取和设定KindEditor值的方法
Jquery取得iframe下内容的方法
网站跨域的五种解决方式
Javascript操作iframe框架经典案例

[关闭]