iframe标签之父子元素互访

来源：互联网发布：淘宝美工怎么接私活编辑：程序博客网时间：2024/05/16 09:27

我们的项目有一个这样的特点，就是顶部，底部，侧栏部分全都是固定的也就是中间部分随着侧栏或顶栏的选择和出现不同的页面，在这种情况下我学习了一个标签，叫做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>

效果如图：
这里写图片描述

避免iframe

iframe是迫不得已才使用的，因为iframe会带来较多的问题，有的浏览器甚至可以将iframe当作广告屏蔽。这只是其中的一点缺点就是兼容问题，另外还有许多，比如从用户角度考虑的，从网页框架结构考虑的等等，网上有大批的缺点解析，我就不再一一列举。

0 0