iframe的运用---特别是获取父子页面的元素

TL;DR

• 使用<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>
• 同域的状况下，当前页面获取iframe页面里面的元素的话，必须使用加载事件，window.frames.iframeName.onload = ...，window.frames.iframeName.document就是iframe的document
• 同域的状况下，子页面获取父页面元素的话，window.parent.document就是父页面的document
• 查看示例demo，demo地址

简单的概念

• iframe功能：可以将另外一个HTML页面嵌入到当前页面中。
• 父页面：iframe元素存在的页面，也就是当前页面
• 子页面：iframe的src的页面，也就是当前页面里面嵌套的页面
• 同域：子页面和父页面的地址同域（协议端口域名均相同）
• 跨域：子页面和父页面的地址跨域
• ！！！跨域的父子页面不能进行获取元素的操做，只能有显示的操做
• 查看示例demo，demo地址

简单使用和属性介绍

<iframe src="./iframe.html" frameborder="0" scrolling="auto" name="iframe"></iframe>
复制代码

属性以下：

• frameborder:是否显示边框，1(yes),0(no)
• height:框架做为一个普通元素的高度，建议在使用css设置。默认值为150px。
• width:框架做为一个普通元素的宽度，建议使用css设置。
• name:框架的名称，window.frames[name]时专用的属性。
• scrolling:框架的是否滚动。yes,no,auto。
• src：内框架的地址，能够使页面地址，也能够是图片的地址。
• srcdoc , 用来替代原来HTML body里面的内容。可是IE不支持。
• sandbox: 对iframe进行一些列限制，IE10+支持

当前页面获取iframe页面的元素---必须是同域

window.frames能够获取页面全部的iframe元素。 获取iframe的的window：

• window.frames.iframeName，主要这里的iframeName是iframe的name属性值。这时候就能够用window的一系列属性了。
• 或者，document.getElementById("frameid").contentWindow
• 这里特别注意，必须等iframe页面都加载完了才能获取iframe里面的元素，window.frames.iframeName.onload = funcetion(){...}

<!-- index.html -->
<iframe src ="/iframe.html" id="test" name="test" scrolling="yes">
 <p>Your browser does not support iframes.</p>
</iframe>

<script> // iframe.html里面的window var iwindow_alias = document.getElementById("testid"); var iwindow = window.frames.test; // 获取iframe的元素就须要在iframe加载后 iwindow.onload = function() { // iframe.html里面的document var idoc = iwindow.document; // iframe.html里面的body var ibody = idoc.body; // iframe.html里面的元素 var iele = iwindow.document.querySelector("a"); console.log(idoc, ibody, iele); }; </script>
复制代码

iframe获取父页面的元素 --- 必须是同域

在iframe页面里，经过访问window.parent，引用它的父框架的window。

<!-- iframe.html -->
  <button>点击</button>
  <script> // index.html里面的window var pwindow = window.parent // index.html里面的document var pdoc = pwindow.document // index.html里面的body var pbody = pdoc.body // index.html里面的a元素之类的 var pele = pdoc.querySelector('a') </script>
复制代码

---

iframe的使用
mdn上iframe的使用
判断iframe框架是否加载完成的方法