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
原文链接:http://manikandanmv.wordpress.com/2009/11/06/getting-iframe-content-in-javascript/