视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > JavaScript >

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

时间:2014-03-29 01:53cuplayer.com
[JS]js来取iframe框架中的内容源代码参考,Iframe是一个内嵌框架，它允许你任意的加载HTML文件到你现在的document里面

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  

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器