多层iframe访问

最新推荐文章于 2021-11-19 15:43:26 发布

weixin_34185512

最新推荐文章于 2021-11-19 15:43:26 发布

阅读量224

点赞数

注意：

一、等iframe里面的文件加载完才可以访问；

二、contentDocument ie6/7不支持；所以采用了contentWindow.document。如果不兼容这两个可以用

  document.getElementById("myframe").contentDocument.getElementById("bframe").contentDocument.getElementById('test').innerHTML;

三、top.frames["myframe"].frames["bframe"].document.getElementById('test').innerHTML这种方式最短了，看起来很爽的样子。

四、访问iframe的window和document在chrome里有安全限制的，上传到服务器上测试；

a.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
     <script>
            function t(){
                alert(document.getElementById("myframe").contentWindow.document.getElementById("bframe").contentWindow.document.getElementById('test').innerHTML);
                //alert(top.frames["myframe"].frames["bframe"].document.getElementById('test').innerHTML);
            }
    </script>
</head>

<body>
    <input name="" value="tttt" onClick="t()" type="button">
    <div id="get" style="height:30px;width:600px;border:1px solid #69F"></div>
    <iframe id="myframe" name="myframe" src="b.html" width="600" height="500"></iframe>
</body>
</html>

b.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
    <iframe id="bframe" name="bframe" src="c.html" width="600" height="500"></iframe>
</body>
</html>

c.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<div id="test">1233333</div>
</body>
</html>

weixin_34185512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多层iframe访问

注意：一、等iframe里面的文件加载完才可以访问；二、contentDocument ie6/7不支持；所以采用了contentWindow.document。如果不兼容这两个可以用 document.getElementById("myframe").contentDocument.getElementById("bframe").contentDocument.getEleme...
复制链接

扫一扫