OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

iFrame的妙用


分享到
分类 JS学习   关键字 Html5   发布 glen  1395751330000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
(作者: 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操作即可。


社区评论 ( Beta版 )
  • #0 iframesucks 1396409733000
    iframe 的各种跨域,异步表单提交,各种其他Hack, 对我来说简直就是黑科技。 为什么没有更加标准的方法实现这些功能而不是靠 iframe 的各种 hack。
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. JSON为王,为什么XML会慢慢淡出人们的视野
  2. 为什么你写的Python运行的那么慢呢?
  3. 用纯CSS实现的箭头
  4. 快乐Node程序员的10个习惯
  5. 什么是最好的编程语言?(怎样才能爱上编程呢?)
  6. 该不该闭合这些元素?曾经〈br/〉的写法是错误的
  7. 使用简单的JavaScript,我们为什么应该抵制ES6
  8. 如何雇佣杰出的外包程序员
  9. NODE.JS为什么会成为企业中的首选技术
  10. 为什么优秀的管理者如此罕见
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. JavaScript的MVC模式向导
  2. 快乐Node程序员的10个习惯
  3. 我最喜欢的jQuery插件模板
  4. Javascript模块化编程:AMD规范及require.js用法
  5. 编写更好的jQuery代码的建议
  6. Node初学者入门,一本全面的NodeJS教程
  7. JS学习:JavaScript的核心
  8. JavaScript教程:Airbnb代码规范
  9. 理解JavaScript中的Event Loop
  10. 通过javascript把图片转化为字符画

 关键字 - Html5
  1. 用纯CSS实现的箭头
  2. 让Select选择框可编辑可输入可自动补全可下拉选择
  3. HTML5的TCP和UDP Web Socket API草案定稿
  4. 传统广告与H5广告的差别在哪里?
  5. WeMall微信商城源码插件代金券部分代码
  6. WeMall微信商城源码插件会员卡代码详情
  7. WeMall微信商城源码插件大转盘代码详情
  8. 你应该使用HTML5的header和footer标签吗?
  9. 5个实用Web界面设计工具 | 附开发案例
  10. 从PDF转换到HTML5的三种方法,你用过吗?

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号