HTML中iFrame标签的两个用法介绍
WEB开发者 发布时间：2015-07-09 17:55:55 作者：佚名 
我要评论
我要评论这篇文章主要介绍了HTML中iFrame标签的两个用法,分别是作为弹出层铺底覆盖
,和跨域写入cookie,需要的朋友可以参考下
最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来，这其中用到了很多关于iframe的方面，总结如下：
1. 作为弹出层铺底覆盖
大家如果做过那种黑色遮罩盖住整张页面，而碰巧用户用的是IE6，更碰巧的是页面上有select元素，那就有得头疼了（原理就不在这里赘述了）。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下：
与弹出div同级放入iframe
保证iframe的 z-index小于弹层div z-index
增加window resize和scroll事件, 保证iframe能盖住整张页面
部分代码
XML/HTML Code复制内容到剪贴板
- var iframe = U.isie6() ? '<iframe style="position:absolute;left:0;top:0;z-index:2000000;filter:Alpha(opacity=0); width:100%;height:' + ds.height + '" frameborder="0"></iframe>' : '';
- $container.append(iframe).appendTo($body);
2. 跨域写入cookie
有 a.com和b.com两个domain。在某些条件下b的部分功能会出现在a页面上。 有时需要操作a页面的时候对b.com domain的cookie做一些操作以方便用户下次访问。我们只需要在a页面加入一个iframe(动态或固定)即可，src属性指向b的一张代理页 面，在这张页面执行cookie操作即可。
相关文章
HTML5新标签兼容——> <!--<if lt IE 9><!endif-->
这篇文章主要介绍了HTML5新标签兼容——> <!--<if lt IE 9><!endif--> 的两种方法,需要的朋友可以参考下2018-09-12- 离线访问对基于网络的应用而言越来越重要,这篇文章主要介绍了HTML5 manifest离线缓存的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随2018-08-08
- frame这个标签不知大家注意过没有,它必须放在frameset中使用,而且经常容易和iframe混淆,这里我们就来举例讲解HTML中iframe和frame的区别,需要的朋友可以参考下2016-05-30
- 这篇文章主要介绍了详解HTML5中的manifest缓存使用,文中同时介绍了相关的一些自动化工具,需要的朋友可以参考下2015-09-09
使用HTML5的Notification API制作web通知的教程
这篇文章主要介绍了使用HTML5的Notification API制作web通知的教程,示例包括需要使用到的相关CSS以及Javascript代码,需要的朋友可以参考下2015-05-08- 这篇文章主要介绍了html5触摸事件判断滑动方向的实现的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-05
- 这篇文章主要介绍了HTML5中判断横屏竖屏的方法(移动端)的相关资料,需要的朋友可以参考下2016-08-04
- 长期以来我们一直缺少一个判断用户是否正在浏览某个指定标签页的方法。用户是否去看别的网站了？他们切换回来了么？2014-05-03
HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
输入框获取焦点后会自动隐藏默认文本，如果为空会提示必填字段2013-05-21html5中canvas学习笔记2-判断浏览器是否支持canvas
判断浏览器是否支持canvas,本人搜集整理了一些使用方法，感兴趣的朋友可以了解下2013-01-06
最新评论