[JS]js来取iframe框架中的内容源代码参考

最新推荐文章于 2024-04-19 11:04:27 发布

173300598

最新推荐文章于 2024-04-19 11:04:27 发布

阅读量1w

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

66 篇文章 0 订阅

订阅专栏

[JS]js来取iframe框架中的内容源代码参考,Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面

Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面，你能够通过“src”属性来动态的加载文件。那么假如你要通过javascript获取Iframe框架里面的内容并且处理它。那么这里有一个例子可以帮助如何去做。并且这些例子通过了FireFox浏览器和IE的兼容。先加载一个简单的Html文件到iframe中来看看效果。然后通过javascript中的getIframeContent方法来获取文件的内容。

GetIframeDetails.html

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

通过 getIframeContent方法怎么做？

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

getElementById(frameId) – 获取所引用的iframe对象
contentWindow – 它是一个属性，返回的是指定的frame或者iframe所在的window对象
contentWindow.document – 返回的是所指定的iframe文档对象
contentWindow.document.body.innerHTML –返回的是iframe中body部分的html

你可以获取iframe里面任意的标签元素。也可以通过标签的name/id来处理。让我们假设一个使用场景：假如我们要获取iframe里面的，div的内容。那么我们可以通过下面这条语句来检索它

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

173300598

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
[JS]js来取iframe框架中的内容源代码参考

[JS]js来取iframe框架中的内容源代码参考,Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面，你能够通过“src”属性来动态的加载文件。那么假如你要通过javascript获取Iframe框架里面的内容并且处理它。那么这里有一个例子可以帮助如何去做。并
复制链接

扫一扫