iframe是内联框架,允许你单独的HTML文件加载到一个现有的文件。您还可以加载文件的动态“src”属性。假设有一个需要iframe内容和过程使用JavaScript。下面的例子可以帮助你做,这已经是一个跨浏览器Firefox和IE浏览器的解决方案。
让我们加载一个简单的HTML文件在iFrame,并获得该文件的内容与方法getiframecontent JavaScript。
<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获取的方法是怎么样的呢?
使用jquery操作iframe
1 内容里有两个ifame
<iframe id=”leftiframe”…</iframe>
<iframe id=”mainiframe..</iframe>
leftiframe中jQuery改变mainiframe的src代码:
$(“#mainframe”,parent.document.body).attr(“src”,”https://qdkfweb.cn“)
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中的jQuery操作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>
