【iframe 笔记】基础内容

1、iframe

​ iframe 就是一个标签 dom 元素，可以一个网页里嵌入另一个网页

​ 导航栏tab切换页（古老的做法）和在线编辑器

​ 历史记录管理，解决ajax化网站响应浏览器前进后退按钮的方案

​ 跨域通信等

<--! iframe 自带width和height属性 -->
<iframe src="https://www.taobao.com" height="500px" width="500px"></iframe>

2、iframe 利弊

​ iframes 阻塞页面加载

​ 触发 window 的 onload 事件是非常重要的。onload 事件触发使浏览器的 ”忙“ 指示器停止，告诉用户当前网页已经加载完毕。当 onload 事件加载延迟后，它给用户的感觉就是这个网页非常慢。

​ window 的 onload 事件需要在所有 iframe 加载完毕后（包含里面的元素）才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。

​ 解决跨域问题 这个很牵强…其实他已经不怎么用了

3、如何获取 iframe 内的 window

​ ①document.getElementsByTagName(‘iframe’)[0].contentWindow（子窗口）

​ ②document.getElementsById(‘iFr’).contentWindow

​ 简易写法 window.iframeName（iframe的name）

​ ③document.iframes[name].contentWindow IE专用

​ ④document.iframes[i].contentWindow IE专用

4、父子页面窗口的关系

​ window.self ==> 就是自己

​ window.parent ==> 父级窗口对象

​ window.top ==> 顶级窗口对象

<--! index.html文件 -->
<--! iframe 自带width和height属性 -->
<iframe src="./one.html" id="iFr" height="500px" width="500px"></iframe>
<script>
    console.log('888');
    var num = 0;
    var oIframe = document.getElementsByTagName('iframe')[0];
    // 等iframe加载完执行 不然检测不到a
    oIframe.onload = function() {
        console.log(oIframe.contentWindow.a);
    }
</script>

<--! 顶级窗口 index.html -->
<--! 父级窗口 index.html -->
<--! one.html文件 -->
<iframe src="./two.html" id="iFr" height="500px" width="500px"></iframe>
one
<script>
    var a = 1;
    console.log(window.parent.num);
</script>

<--! 顶级窗口 index.html -->
<--! 父级窗口 one.html -->
<--! two.html文件 -->
two
<script>
    var b = 2;
    console.log(window.parent.num);
</script>

5、父子窗口通信

​ 父访问子（等待子iframe加载完成后可以通过iframe.contentWindow.变量 访问也会涉及跨域问题）

​ 子访问父涉及跨域问题

6、iframe受跨域限制如何解决

​ ①document.domain: 解决跨域限制最好的办法

​ ②window.location.hash: 解决子页面访问父页面数据问题(window.location.href)

​ ③window.name: 解决父页面访问子页面的数据问题

​ ④H5 PostMessage ==> 等讲到h5时讲

父页面传给子页面值通过hash值来传

<iframe src="./one.html#aaa" id="iFr" height="500px" width="500px"></iframe>
<script>
    var num = 0;
    var oIframe = document.getElementsByTagName('iframe')[0];
    // hash 父给子传值
    oIframe.src += '#' + num;
</script>

<--! one.html文件 -->
<iframe src="./two.html" id="iFr" height="500px" width="500px"></iframe>
one
<script>
    var a = 1;
    // hash 父给子传值
    console.log(window.location.href);
    console.log(window.location.hash);
</script>

<--! two.html文件 -->
two
<script>
    var b = 2;
</script>

子传给父 值存在window.name里，通过替换为同源文件实现访问值

​ window.name 可以把值保存在窗体上

​ e.g index与two同源，one不同源

<iframe src="./one.html#aaa" id="iFr" height="500px" width="500px"></iframe>
<script>
    // 子给父传值
    var oIframe = document.getElementsByTagName('iframe')[0];
    oIframe.onload = function () {
        oIframe.onload = null;
        oIframe.src = './two.html';
    	console.log(oIframe.contentWindow.name);
    }
</script>

<--! one.html文件 -->
<iframe src="./two.html" id="iFr" height="500px" width="500px"></iframe>
one
<script>
    var a = 222;
    // 子给父传值
    window.name = a;
</script>

<--! two.html文件，最好不要写内容 -->

7、判断iframe加载完成

iframe(dom元素).onload = function () {}

iframe.onreadystatechange = function(){ 
    if (iframe.readyState == "complete"){ 
    	alert("Local iframe is now loaded."); 
    } 
} 

8、iframe受跨域限制如何解决

​ ①document.domain：解决跨域限制最好的办法

​ ②window.location.hash：解决子页面访问父页面数据问题(window.location.href)

​ ③window.name：解决父页面访问子页面的数据问题

​ ④H5 PostMessage ==> 等讲到h5时讲

9、document.domain

​ document.domain（www.bj.58.com;www.tj.58.com）

​ 两个域名必须属于同一个基础域名！而且所用的协议，端口都要一致，否则无法跨域。

10、window.location.hash

​ 通过锚点#传递数据，利用定时器实时监测

​ 锚点特性#不刷新页面 ，定时器耗性能方法比较笨！

子访问父

​ 大概思路child.html 设置定时器 监测 url#query

​ parent.html（设置iframe dom元素 的src属性）url#query 设置参数

父访问子？

​ location.hash缺点：传递数据量有限；不太安全

11、window.name

​ window.name 特点：页面重载刷新 name值不变，即使换了一个页面

​ 有三个页面：

​ a.com/app.html：应用页面。

​ a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。

​ b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。

var FrameCross =  document.getElementById('CrossFrame');
var state = 0;
FrameCross.onload = loadFunc;
function loadFunc () {
	if (state === 1) {
		alert(FrameCross.contentWindow.name);
	}else if (state === 0) {
		state = 1;
        alert(FrameCross.contentWindow.cross);
        FrameCross.contentWindow.location = 'proxy.html';
    }
}

Func;
function loadFunc () {
if (state === 1) {
alert(FrameCross.contentWindow.name);
}else if (state === 0) {
state = 1;
alert(FrameCross.contentWindow.cross);
FrameCross.contentWindow.location = ‘proxy.html’;
}
}