我爱互联网

iframe异步加载技术及性能

dengjianqiang200@gmail.com (woiweb) — Thu, 31 May 2012 08:33:00 +0000

我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly: iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。那么为了提高页面性能，怎样才能不阻塞主页面的onload事件的来加载iframe呢？这篇讲了四种加载iframe的方法：普通iframe，onload之后加载iframe，setTimeout() iframe和异步加载iframe。每种方法的加载结果我都用IE8的时间线来展示。我建议多注意下动态异步加载这个方法，因为这是性能表现最佳的。另外，还有一种友好iframe(friendly iframe)技术。他可能算不上是iframe加载的技术，但是必须使用iframe，他是无阻塞加载的。普通方法加载iframe 这是一种人尽皆知的普通加载方法，它没有浏览器的兼容性问题。 <iframe src="/path/to/file" frameborder="0" width="728" height="90" scrolling="auto"> </iframe> 使用这种加载方法会在各浏览器中有如下表现： iframe会在主页面的onload之前加载 iframe会在所有iframe的内容都加载完毕之后触发iframe的onload 主页面的onload会在iframes的onload触发之后触发，所以iframe会阻塞主页面的加载当iframe在加载的过程中，浏览器的会标识正在加载东西，处于忙碌状态。这里是一个演示页面，时间线图显示出iframe会阻塞主页面的加载。我的建议：注意onload阻塞。如果iframe的内容只需要很短的时间来加载和执行，那么也不是个大问题，而且使用这种方法还有个好处是可以和主页面并行加载。但是如果加载这个iframe需要很长时间，用户体验就很差了。你得自己测试一下然后在 http://www.webpagetest.org/也做些测试，根据onload的时间看看是否需要其他加载方法。在onload之后加载iframe 如果你想在iframe中加载一些内容，但是这些内容对于页面来说不是那么的重要。或者这些内容不需要马上展现给用户的，需要点击触发之类的。那么可以考虑在主页面载入之后加载iframe。 <script> //doesn't block the load event function createIframe() { var i = document.createElement("iframe"); i.src = "path/to/file"; i.scrolling = "auto"; i.frameborder = "0"; i.width [...]

Flash遮盖页面元素的解决方法

dengjianqiang200@gmail.com (woiweb) — Wed, 30 May 2012 07:25:15 +0000

在做web开发中可能会遇到flash遮挡页面中元素的情况，无论怎么设置flash容器和层的深度(z-index)也无济于事，现有的解决方案是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”，但 wmode属性到底是什么意义，为什么可以解决这个问题呢？ window mode(wmode) wmode即窗口模式总共有三种，看看当年Macromedia官方的说法： Window: Use the Window value to play a Flash Player movie in its own rectangular window on a web page. This is the default value for wmode and it works the way the classic Flash Player works. This normally provides the fastest animation performance. Opaque: By using the Opaque [...]

10个出色的HTML5画布示例

dengjianqiang200@gmail.com (woiweb) — Tue, 22 May 2012 02:41:05 +0000

本文收集了一些出色的html5 画布演示。最近网上有很多赏心悦目的html5演示作品，我很高兴能将我所收集到的分享给大家。HTML5的功能越来越强大，占用的处理器甚至比 flash 还少。所以，是否有一天 flash 会被 HTML5 完全取代呢？（查看下面示例，请使用支持HTML5的浏览器。） 1. FishBowl 精美的鱼缸 2. DeviantART muro 轻量级的在线图像编辑器 3. 3D Earth 自转的地球 4. Asteroid Belt 太空中的小行星带 5. Interactive Polaroids 漂亮的相册（看上去就像用偏光板拍摄的） 6. Canvas Cycle: True 8-bit Color Cycling with HTML5 这个作品最为华丽，甚至包含了一套演示——各种天气效果的动画化演示 7. js cloth 三维环境下的二维图像 8. CanvasMol 多种元素的三维份子结构 9. Or so they say…” by xplsv 不错的太空景色 10. 3D Model [...]

IE9下创建带name的iframe

dengjianqiang200@gmail.com (woiweb) — Mon, 26 Mar 2012 03:36:00 +0000

前几天在开发SDK时发现用Js模拟Ajax无刷新提交里面的方式，在IE9下创建Iframe会出问题，抛出一个错误： DOM Exception: INVALID_CHARACTER_ERR (5) ，原来IE9下不能用 document.createElement(‘<iframe name=”uploadIframe”>’);这种方式创建，经调整后将代码修改为： var name = 'test'; var ua = navigator.userAgent.toLowerCase(); var ie = /msie/.test(ua), ie9 = false; if(/msie 9.0/.test(ua)) { ie9 = true } var iframe; if(ie && !ie9) { iframe = document.createElement('<iframe name=' + name + '/>'); } else { iframe = document.createElement('iframe') } document.body.appendChild(iframe);

Iframe跨域通信完美解决方案

dengjianqiang200@gmail.com (woiweb) — Thu, 08 Mar 2012 09:36:51 +0000

跨域通信这个话题在之前已经提到总结过，关于跨域通信大家可以参考同源策略，跨域资源共享的10种方式以及IE下因设置document.domain而无法和Iframe通信的解决方法。以前在项目中开发了不少跨域功能，但都比较依赖项目，今天我将跨域功能模块抽出并精简为一个通用的javascript包，它用纯js实现，不依赖于flash，而且已经包含了目前最常用的跨域通信方法：window.postMessage和window.name，大家只需简单引用即可实现单向或双向跨域通信，非常方便。使用方法如下（将下面的代码同时放到要跨域通信的两个页面中）：引入xd.js <script type='text/javascript' src='http://crossdomain.sinaapp.com/xd/xd.js'></script> 添加监听回调函数 var callback = function(data) { //data为返回的json对象 } XD.receiveMessage(callback); 调用跨域通信方法 //target：跨域通信的window对象，parent或iframe.contentWindow //json：要发送的数据对象，json格式，如：{'height':'300px'} XD.sendMessage(target, json); Over 至此，一个双向跨域的功能已经完成了，这个方案有一个小小的缺陷，就是会重写window.name，所以请避免在开发中借用window.name来传递数据。光看代码可能还不太清晰，来看个demo，给大家个使用比较频繁的示例：iframe高度自适应，如有不明白可留言或@woiweb。 demo下载

10 个华丽的 CSS3 设计教程

dengjianqiang200@gmail.com (woiweb) — Thu, 08 Mar 2012 07:58:21 +0000

网页设计师们普遍认为在网站设计方面，css3拥有令人难以置信的潜力，但目前过多的限制导致它还未被广泛应用。这篇文章介绍了10个css3设计教程，帮助你熟练运用CSS3的一些新增功能。由于浏览器对CSS3的支持问题，部分教程的效果仅支持在Chrome、Safari、Firefox等现代浏览器上查看。 1. 个人技能动画演示本教程教你使用CSS3来打造动画形式的个人技能说明，颜色和字体可按个人喜好设置。源码 / 演示 2. 反向动画用CSS3/jquery创建反向动画的教程（支持Firefox、Safari和Chrome）。源码 / 演示 3. 碳纤维风格登录表单使用渐进增强来设计表单，即使没有javascript和css的支持，该表单也能正常使用。该表单还使用了Ajax和jQuery来实现输入验证。源码 / 演示 4. BounceBox 通知插件该教程实现的是弹出效果，你可以添加CSS规则来设置弹出框的位置，也可以通过CSS代码来设计弹出框的样式。源码 / 演示 5．气泡动画按钮有了这个按钮包，再借助CSS3，你只需指定一个类名，就可以将网站上的任何链接变为气泡按钮。有四种颜色主题和三种尺寸可选。源码 / 演示 6. 下拉选择框用CSS3和jQuery建立一个功能齐全且美观的下拉选择框。源码 / 演示 7. 关于页面在本教程中，我们将使用PHP、html5和CSS3创建一个简单的关于页面，该页面会向用户呈现你的联系方式，还有一个下载电子名片的选项。源码 / 演示 8. 有趣的CSS3效果：旋转的报纸这个经典的效果可用CSS3来实现，Firefox、Chrome和Safari均支持这个效果。源码 / 演示 9. 闪亮的旋钮控件在本教程中，我们将用jQuery插件创建一个闪亮的旋钮控件——KnobKnob，这个插件使用CSS3转换和jQuery新的事件处理方法来和用户进行交互——点击按钮然后旋转可以调节显示效果。源码 / [...]

DD_belatedPNG让IE6支持PNG透明图片

dengjianqiang200@gmail.com (woiweb) — Tue, 14 Feb 2012 02:28:36 +0000

IE6不支持透明的PNG图片，而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web 设计的创意发挥。虽然解决IE6的透明PNG的方法也很多，从使用IE特有的滤镜或是expression，再到javascript+透明 GIF替代.但是这些方法都有一个缺点，就是不支持css中backgrond-position与background-repeat属性。而使用 DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题，并且支持backgrond-position与background- repeat。这是其他方法所不具备的，同时DD_belatedPNG还支持a:hover属性,以及<img>。我们的网站就加入了 DD_belatedPNG处理导航PNG透明图片，使其在不同浏览器下保持相同的外观。使用方法：首先下载JS文件 0.0.8a.js (未压缩版本) 0.0.8a-min.js (压缩版) 之后在页面中引用代码： <!–[if IE 6]> <script type=”text/javascript” src=”下载下来的JS路径”></script> <script> DD_belatedPNG.fix(‘CSS选择器, 应用类型’); </script> <![endif]–> 引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。这些可以简写成 DD_belatedPNG.fix(‘#box-one, .header, img,background’); 。更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header,#footer,.box-two a:hover, img,background’); 等等。另外，为解决IE6下背景图闪烁，可以在页面中添加如下脚本 <!–[if IE 6]> <script type=”text/javascript”> // <![CDATA[ if((window.navigator.appName.toUpperCase().indexOf("MICROSOFT")>=0)&&(document.execCommand)) [...]

同源策略

dengjianqiang200@gmail.com (woiweb) — Fri, 10 Feb 2012 08:56:09 +0000

受同源策略限制，javascript不能跨域!　这里提到了同源策略，那么什么是同源策略呢？同源策略(Same Origin Policy)，它是由Netscape提出的一个著名的安全策略。现在所有支持javascript 的浏览器都会使用这个策略。同源策略阻止从一个域上加载的脚本去获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这说明浏览器隔离来自不同源的内容，以防止它们之间的操作。为何要使用同源策略？答案：安全！一个简单的例子：比如一个黑客，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。后果会非常严重！那么什么才是同源？所谓同源是指域名，协议，端口均相同。同源的几种情况： 1.不同域名属于跨域，如：www.a.com和www.b.com，另外www.a.com 和www.a.com.cn 也属于不同域名。 2.主域名和子域名（二级域名、三级域名等）跨域，如：www.a.com 和 sub.a.com 属于跨域，sub.a.com 和 sub1.a.com 之间也是跨域。 3.不同协议属于跨域，如：http://www.a.com 和 https://www.a.com。 4.不同端口，如： www.a.com:80和 www.a.com:81 。 5.IP和域名属于跨域，如：123.125.106.16 和 www.weibo.com。

IE下因设置document.domain而无法和Iframe通信的解决方法

dengjianqiang200@gmail.com (woiweb) — Fri, 10 Feb 2012 02:53:31 +0000

最近在开发SDK的过程中发现IE下有个很怪异的问题：在同一域下，因在父页面上设置了document.domain，而导致无法正常和Iframe（也是同域下）进行通信，IE下抛出的错误是：SCRIPT5: 拒绝访问，导致无法操作iframe中的内容。经过查阅了很多资料后发现IE下，在父页面或在iframe页面中，只要设置了document.domain，无论是和当前域名相同还是根域名，均视为跨域，所以才会出现拒绝访问的错误，即使你这样写document.domain=document.domain；虽然好像没人这么干。那么如何才能解决这个问题，让父页面和iframe页面正常通信呢，根据同源策略，让双方均设置同样的domain就可以达到目的。比如页面A是http://www.a.com/a.html ，页面B是http://www.a.com/b.html，这时候两个页面中都写上document.domain=”aaa.com”，这样两个页面就可以交互了。但是，上面的情况只适用于嵌入的页面是事先已经已<iframe src=”http://www.a.com/b.html”></iframe>的形式在页面中写好了，而如果是在页面中动态创建的iframe标签再指定其src为http://www.a.com/b.html，上面的方法就不适用了。此种情况及解决方法请直接参考原著：IE下Iframe的 document.domain的怪异问题上面的这种情况是当Iframe的src不为空，即存在实际的引用页面的解决方法。但如果需要创建一个空白的iframe（即src不指定），还要想拿到iframe里的document对象呢？看个例子： //访问地址：http://www.a.com/a.html <html> <head> <title>Iframe</title> </head> <body> <script type="text/javascript"> document.domain = 'a.com'; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.onload = function() { console.log(iframe.contentWindow.document.location) } </script> </body> </html> 有人想到设置iframe里面的domain，思路正确，但由于父页面已经设置了domain，在父页面中根本无法获取到空白iframe的document对象，也就无法设置iframe的domain。后来经过了很多尝试，也研究了twitter的SDK的代码，找到了解决方案：通过设置iframe的src来执行一段JS代码，如下， iframe.src = "javascript:void((function(){document.open();document.domain='"+ document.domain + "';document.close()})())"; 通过这种方式就可以改写iframe里面的domain了，这和在浏览器地址栏里输入这段代码的功效一样，这种方式像是旁门左道，但是这确实奏效了。于是上面的代码更改为： //访问地址：http://www.a.com/a.html <html> <head> <title>Iframe</title> </head> <body> [...]

割绳子游戏HTML5版

dengjianqiang200@gmail.com (woiweb) — Wed, 11 Jan 2012 03:13:20 +0000

在拉斯维加斯正在举行的CES大会上，微软CEO鲍尔默宣布了基于IE9和html 5框架的割绳子游戏，由微软及游戏开发商ZeptoLab共同推出，用于促进IE9的使用及网页的美化，网页版点击这里。游戏主角就是一个贪吃的小绿怪兽，必须通过割绳子来将糖果送到小怪物嘴里，并搜集星星来增加得分。到目前为止，下载量已经超过6000万，潜力足以和《愤怒的小鸟》媲美。虽然基于IE9，但游戏可在任何兼容html5的浏览器上玩儿。回顾小家伙贪吃的发展史，2010登陆iOS，去年六月登陆Android，如今又推出html 5网页版，不过是否能胜过其本地应用还有待考证。新版结合Windows 7操作系统，画面和其它版本应用没什么差别，但是可以将游戏添加到Window 7的任务栏当中，新的无锁通关功能是以往版本都不具备的，同时整合Facebook及Twitter，玩家可以将得分晒给朋友或粉丝。英国IE开发组领导Hegerty说：“HTML 5真是个好东西，可以让东西一下变得更具价值，画面丰富，漂亮，游戏只是一个部分，其他还有电影，音乐等，这是今后的一个方向。我们一直在寻找新的优秀方法，为IE9用户带来意想不到的html5体验”。赶紧试试吧，游戏地址：http://www.cuttherope.ie/ 转自：http://www.leiphone.com/html5-cut-rope.html

推荐阅读：
30个极其迷人的flash载入页面的设计	28个Flash页面载入进度效果(Loading)欣赏	40个免费flash相册程序	45个炫酷的3D flash酷站欣赏	12网站帮你学习Flash/ActionScript
来自无觅网络的相关文章：
Flash真的适合做网站应用吗？ (@yixieshi)	Flash广告banner设计要素 (@yixieshi)	10个让你忘记 Flash 的 HTML5 应用演示 (@yixieshi)	BBC表示：Flash在移动设备上的表现远不及HTML5 (@yixieshi)	禹容网络（上海）诚聘网站UI设计师/FLASH互动设计师/平面设计师 (@yixieshi)
无觅

推荐阅读：
10个不错的CSS3表单教程	非常有用的HTML5,CSS3的框架	13个令人惊叹的html5和css3示例	割绳子游戏HTML5版	另外10个很棒的html5、css和javascript效果
来自无觅网络的相关文章：
前端工作者的福音：HTML5和CSS3 (@yixieshi)	HTML5和CSS3的终极工具资源集合 (@yixieshi)	什么是HTML5和CSS3？HTML5和CSS3的新特性 (@yixieshi)	浅谈HTML5与Web APP (@yixieshi)	15个清爽简约风格的 HTML5 网站作品 (@yixieshi)
无觅

推荐阅读：
微软发布 IE9平台预览第四版	9个javascript和gif动画解决方案	IE下因设置document.domain而无法和Iframe通信的解决方法	IE下document.getElementById的处理方式	IE6-7下的调试利器-IE WebDeveloper使用教程
无觅

推荐阅读：
IE下因设置document.domain而无法和Iframe通信的解决方法	高效 JavaScript	同源策略	15款很棒的 JavaScript 开发工具	9个javascript和gif动画解决方案
来自无觅网络的相关文章：
卖给用户的是解决方案而不是功能 (@yixieshi)	8个惊艳的 HTML5 和 JavaScript 特效 (@yixieshi)	卡巴斯基手机版产品获誉理想安全解决方案 (@yixieshi)	推荐给开发者10款超级有用的JavaScript工具 (@yixieshi)	HTML 5 和 JavaScript实现的红白机经典游戏《打野鸭》 (@yixieshi)
无觅

推荐阅读：
常用CSS3动画效果合集-animate.css	10款令人难以相信的CSS3绘图效果	18个明亮型纯CSS的绘图示例	非常有用的HTML5,CSS3的框架	10个不错的CSS3表单教程
来自无觅网络的相关文章：
新浪微博CSS3适用细节初探 (@yixieshi)	前端工作者的福音：HTML5和CSS3 (@yixieshi)	什么是HTML5和CSS3？HTML5和CSS3的新特性 (@yixieshi)	HTML5和CSS3的终极工具资源集合 (@yixieshi)	超平面的触觉设计 (@yixieshi)
无觅

推荐阅读：
Js模拟Ajax无刷新提交	IE下因设置document.domain而无法和Iframe通信的解决方法	IE9下创建带name的iframe	Iframe跨域通信完美解决方案	impress.js使用教程
无觅

推荐阅读：
10个出色的HTML5画布示例	开始学习HTML5所需要的技巧和工具	30多个资源帮你学习HTML5	非常有用的HTML5,CSS3的框架	15款强大的HTML5素描及绘图工具
无觅