iframe标签之父子元素互访

最新推荐文章于 2022-09-06 17:40:57 发布

shenmill

最新推荐文章于 2022-09-06 17:40:57 发布

阅读量387

点赞数

分类专栏： javascript 文章标签：框架 iframe

本文链接：https://blog.csdn.net/shenmill/article/details/52073714

版权

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

我们的项目有一个这样的特点，就是顶部，底部，侧栏部分全都是固定的也就是中间部分随着侧栏或顶栏的选择和出现不同的页面，在这种情况下我学习了一个标签，叫做iframe，今天我们来好好研究它。

什么是iframe？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架），也就是说iframe是一个框架，它嵌套在一个页面内部。就像我们的项目，根据选项的不同只需要切换iframe链接的页面而不用换取整个页面，这也就大大的减少了代码量。

iframe的属性

如下图所示：
这里写图片描述
在html代码里经常这样写：

      <iframe id="iframeid" src="XX.html" width="XX" height="XX"></iframe>

这几个相当于是必须的吧，其他的像scrolling，frameborder等需要的时候根据表格属性添加就好了。

父子元素的互访

虽然有iframe标签，但是毕竟是页面里嵌套了另外一个页面，如果父页面要获取iframe标签里子页面的内容，那应该咋办？我们来看看能不能通过dom访问。

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>
    <button id="btn">Click me!</button>
    <p>Hello!this is parent window!</p>
    <iframe id="iframeid" src="./css-sanjiao.html" width="600" height="600"></iframe>
    <script type="text/javascript">
        var iframe =document.getElementsByTagName('iframe')[0];
        console.log(iframe);
    </script>
</body>
</html>

输出是什么结果呢？来我们看看！
这里写图片描述
是这样子的，标签下套了一个html文件，里面的元素再也无法访问。看起来貌似还跨域咧。NO！so easy，就几行代码就OK咧。
父页面：

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>
    <button id="btn">Click me!</button>
    <p>Hello!this is parent window!</p>
    <iframe id="iframeid" src="./css-sanjiao.html" width="600" height="
    600"></iframe>
    <script type="text/javascript">
       var oBtn = document.getElementById('btn');
       oBtn.addEventListener('click',function(){
 alert(document.getElementById('iframeid').contentWindow.document.getElementById('child').innerHTML)},false);
    </script>
</body>
</html>

子页面：

<!DOCTYPE html>
<html>
<head>
    <title>css三角符号</title>
    <style type="text/css">
        #demo {
            width:0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }
        .div1{
            width: 200px;
            height: 200px;
            background: #fff;
            position: relative;
            border:1px solid skyblue;
        }
        .div1:after,.div1:before{
            border:solid transparent;
            content: '';
            height: 0;
            left: 100%;
            position: absolute;
            width: 0;
        }
        .div1:after{
            border-left-color:#fff; 
            border-width: 20px;
            top: 20px;
        }
        .div1:before{
            border-left-color:skyblue; 
            border-width: 22px;
            top: 18px;
        }
    </style>
</head>
<body>
    <div id="child">Hi!this is Child!</div>
    <div class="div1"></div>
    <div id="demo"></div>
</body>
</html>

页面是这个样子的：
这里写图片描述
点击click按钮，弹出子页面中p标签里的内容。如图：

下来我们来看看子元素访问父元素的情况：
父页面：

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
</head>
<body>
    <p id="father">Hello!this is parent window!</p>
    <iframe id="iframeid" src="./css-sanjiao.html" width="600" height="
    600"></iframe>
</body>
</html>

子页面：

<!DOCTYPE html>
<html>
<head>
    <title>css三角符号</title>
    <style type="text/css">
        #demo {
            width:0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent red transparent;
        }
        .div1{
            width: 200px;
            height: 200px;
            background: #fff;
            position: relative;
            border:1px solid skyblue;
        }
        .div1:after,.div1:before{
            border:solid transparent;
            content: '';
            height: 0;
            left: 100%;
            position: absolute;
            width: 0;
        }
        .div1:after{
            border-left-color:#fff; 
            border-width: 20px;
            top: 20px;
        }
        .div1:before{
            border-left-color:skyblue; 
            border-width: 22px;
            top: 18px;
        }
    </style>
</head>
<body>
    <div id="child">Hi!this is Child!</div>
    <div class="div1"></div>
    <div id="demo"></div>
    <button id="btn">Click me!</button>
    <script type="text/javascript">
       var oBtn = document.getElementById('btn');
       oBtn.addEventListener('click',function(){
     alert(window.parent.document.getElementById("father").innerHTML);
   });
    </script>
</body>
</html>