宜昌本地软件开发与弱电工程服务商
项目咨询 · 快速响应
您当前的位置： > 个人博客 > javascript

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

2016-10-13 00:16:48 点击量:92 标签: 收藏本文

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

GetIframeDetails.html 

  1. <html> 
  2.  <body> 
  3.  <iframe id="testFrame" src="FrameContent.html" > 
  4.  </iframe> 
  5. <a href="#" onclick="getIframeContent('testFrame');">Get the content of Iframe</a> 
  6.  </body> 
  7. <script> 
  8.  function getIframeContent(frameId){ 
  9.  var frameObj = document.getElementById(frameId); 
  10.  var frameContent = frameObj.contentWindow.document.body.innerHTML; 
  11.  alert("frame content : "+frameContent); 
  12.  } 
  13.  </script> 
  14.  </html> 

FrameContent.html

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

通过 getIframeContent方法怎么做？

  1. function getIframeContent(frameId){ 
  2.  var frameObj = document.getElementById(frameId); 
  3.  var frameContent = frameObj.contentWindow.document.body.innerHTML; 
  4.  alert("frame content : "+frameContent); 
  5.  } 
  • getElementById(frameId) – 获取所引用的iframe对象
  • contentWindow – 它是一个属性，返回的是指定的frame或者iframe所在的window对象
  • contentWindow.document – 返回的是所指定的iframe文档对象
  • contentWindow.document.body.innerHTML –返回的是iframe中body部分的html

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

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

 

上一篇： [JS]js的0,false,null,undefined对比的源代码示例
下一篇： [JavaScript]JavaScript处理iframe的动作
ABOUT US
宜昌农人网络科技有限公司

我们是一家提供综合软件外包与弱电工程服务的技术公司。

业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。

公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室