iFrame的妙用
(作者: Glen,返利网资深工程师,曾在EA等公司任职)
最近工作有个在项目-布兜收藏夹。简言之就是将喜欢的图片收藏到布兜页面上来,这其中用到了很多关于iframe的方面,总结如下:
1. 作为弹出层铺底覆盖
大家如果做过那种黑色遮罩盖住整张页面,而碰巧用户用的是IE6,更碰巧的是页面上有select元素,那就有得头疼了(原理就不在这里赘述了)。我们会发现弹出的DIV没法遮住select, 轮到我们的iframe出场了。逻辑如下:
- 与弹出div同级放入iframe
- 保证iframe的 z-index小于弹层div z-index
- 增加window resize和scroll事件, 保证iframe能盖住整张页面
部分代码
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操作即可。
iFrame的妙用的更多相关文章
- HTML的iframe标签妙用 - 在线执行前端代码的网站原理是什么?
在我自己的日常前端开发中,其实iframe标签出现的次数并不是很多.作为一个很古老(浏览器兼容性非常好)的标签,有必要去了解一下它的典型应用场景. (图片说明:所有浏览器都支持iframe,无论什么版 ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 博客代码:iframe—网页中嵌入其他网页
iframe 是一个可以把另外一个网页嵌入到一个网页里的代码,非常有用.对于一个内容不错的网页,要方便地把它搬到自己的博客里,用这个代码最合适.而对于在新浪博客里不支持的一些网页效果和代码,可先把他们 ...
- 让iframe自适应高度-真正解决
需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象. (需要只有iframe出现滚动条) 本人一开始这么写:会造成只有主页面加载是设定 ...
- [转]让iframe自适应高度-真正解决
原文地址:https://www.cnblogs.com/rogge7/p/7762052.html 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同 ...
随机推荐
- 2017-2018-1 20179202《Linux内核原理与分析》第二周作业
本周着重学习了汇编指令,并通过反汇编C程序了解栈帧变化. 实践 看了孟老师的演示视频后,我重新写了C程序,如下: int main() { int a=1,b=2; return g(a,b); } ...
- TopTicTacToe 开发文档
团队成员: 1.张旭 2.余浩 3.孙闯 4.吴阳 5.王晓华 6.张国庆 开发文档地址:http://www.kancloud.cn/netcon/t4 代码项目地址:https://coding. ...
- 【JAVAWEB学习笔记】网上商城实战4:订单模块
今日任务 完成订单模块的功能 1.1 订单 模块的功能 1.1.1 我的订单: [我的订单的查询] * 在header.jsp中点击我的订单. * 提交到Servlet: * 获得用户 ...
- iOS 9音频应用播放音频之控制播放速度
iOS 9音频应用播放音频之控制播放速度 iOS 9音频控制播放速度 iOS9音频文件在播放时是以一定的速度进行的.这个速度是可以进行更改的,从而实现iOS9音频文件的快速播放和慢速播放功能.要实现i ...
- iOS 9音频应用开发基础教程
iOS 9音频应用开发基础教程(大学霸内部资料) 介绍:iOS 9音频应用开发基础教程(内部资料)是iOS 9音频应用开发专向教程.本书采用Swift 2.0语言开发基于iOS 9的音频应用.实现 ...
- POJ 3228 [并查集]
题目链接:[http://poj.org/problem?id=3228] 题意:给出n个村庄,每个村庄有金矿和仓库,然后给出m条边连接着这个村子.问题是把所有的金矿都移动到仓库里所要经过的路径的最大 ...
- 【计算几何】【二分图判定】Gym - 101485C - Cleaning Pipes
题意:有n个水井,每个水井发出一些管线(都是线段),然后每条管线上最多只有一个水井.所有从不同的水井发出的管线的相交点都是清洁点(不存在清洁点是大于两条管线点的交点).你需要在某些管线上放出一些机器人 ...
- 执行时间 Exercise07_16
import java.util.Arrays; import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:执行时间 * */ pu ...
- bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级 -- 分层图最短路
1579: [Usaco2009 Feb]Revamping Trails 道路升级 Time Limit: 10 Sec Memory Limit: 64 MB Description 每天,农夫 ...
- Unity 播放音频文件
Unity 播放音频文件参考代码: public void Play(string strSoundName, float autoDestroyTime = 0f, bool bLoop = fal ...