iframe内联

iframe是什么?

就是一个标签,dom元素。

有什么作用?

  1. 网页嵌套网页;如:导航栏tab切换页、在线编辑器、广告植入。
  2. 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案。
  3. 跨域通信等;

iframe 优缺点?

  1. iframe会阻塞页面加载;(页面阻塞)当一个页面的iframe标签过多时,会导致刷新图标一直转圈,给人一种迟迟没有加载好的感觉。因为window的onload事件只有在所有标签加载完才会触发。(注意:通过js动态添加的iframe的src不会阻塞页面)

父子窗口window的获取

  1. 判断iframe是否加载完成
    非IE:iframe.onload = function(){} //页面加载完成会触发onload事件
    IE:
iframe.onreadystatechange = function(){
	if(iframe.readyState == "complete" || iframe.readyState == "loaded"){
			//进到此处才说明加载完成
	}
}
  1. 获取子窗口的值(要求两个同源,不满足同源则不能)
    方法一:document.getElementsByTagName('iframe')[0].contentWindow; //contentWindow是指子窗口的window 注意判断是否加载完成
    方法二:window.frames["name"].key; //name是子窗口的名字,key是要找的值 部分浏览器不支持
  2. 获取父窗口的值
    window.parent;//得到父窗口的window
  3. 如果是多级窗口,要获取最顶层窗口的window:window.top;

父子窗口通信及跨域(现在不利用iframe跨域)

  1. 父级值传给子级:利用哈希值跨域
    在父级窗口中,动态的将要获取的值添加到iframe的src中,在子窗口使用window.location.hash
iframe.src += "#" + key; //key是要获取的值,比如一个age =20
  1. 子级的值传给父级:window.name
    在子级设置window.name等于某值;
    然后将子级替换为与父级同源的一个页面
    然后在父级获取到:frame.contentWindow.name
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值