Follow me on GitHub

JavaScript

移动设备浏览当前页

这是一个用于移动设备(手机/pad)访问桌面设备(台式机/笔记本)正在浏览网页的书签栏工具。如果你还在通过电子邮件向自己发送链接,以便在另一台设备上打开,推荐你试试这个小工具。

由来

受Chrome“发送标签页到移动设备”功能的启发,有了让手机能够访问到电脑浏览器正在浏览的网页这个想法。最开始的实践是在博客文章页右边栏添加了“移动设备上浏览本页”挂件,但我这样一个门可罗雀的小博客受众实在有限;于是考虑以bookmarklet的形式,借助JavaScript这种为浏览器广泛支持的脚本语言,生成网址二维码来实现浏览网页的设备间同步,最终完成此工具。

More >

webrtc实现的视频聊天室应用

在Github上逛荡,发现一个有趣的项目 webrtc.io-demo —— 对webRTC的简化应用。

百科上的介绍“webRTC实现了基于网页的视频会议,标准是WHATWG 协议,目的是通过浏览器提供简单的javascript就可以达到实时通讯(Real-Time Communications (RTC))能力…”

看样子是很有希望在未来浏览器端到端通信大展拳脚。

More >

IE浏览器URL最大长度2,083?

目前参与的项目中有个弹窗音乐播放器,使用url传参(模拟get方法)实现无刷新为播放器(弹窗)添加歌曲列表的功能。偶尔会遇到歌曲列表被截断的情况。仔细研究后发现只有在首次弹窗时发生问题,如果传参时播放器窗口已打开,则无此问题。

刚开始以为是脚本加载或执行过程中依赖关系处理不当导致此问题,而窗口已打开由于加载缓存文件较快不存在网速影响。直到今天安插debug脚本结合调试工具才发现真正的问题在于通过url传递的参数超长部分被截断了,诡异之处在于:播放同样的歌曲列表,按理说传递的参数包括参数长度都是一样的,如果是浏览器限制导致问题,给同样的参数应该产生相同的结果才对,而实际操作中却只在首次播放(弹窗口)时出现参数被截断的问题。

唯一可能导致问题的差异变量是目标窗口(以window.name标识)的存在情况,通过window.open打开一个指定name参数的窗口,如果该窗口不存在,则传递的url参数(字符串)长度超过2083部分被舍弃;若目标窗口存在,则url参数长度超过4113部分被舍弃。 More >

Chrome一键“加入收藏”按钮实现代码(gears API)

在一些网站尤其是导航网站中上常常能够看到”加入收藏”、”设为首页”这样的链接,点击后就可以完成收藏本页以及更改首页操作,非常方便,也有助于提高网站的粘性。但由于各种浏览器的出现,要兼容所有浏览器越来越不容易了,目前网上翻出的代码还没见到有能够让Chrome“一键收藏”成功的。不过在前段时间开发拾贝电台应用(Chrome Webstore)的时候,发现通过调用gears API可以生成应用的桌面图标,像桌面软件的快捷方式一样方便使用,达到和加入收藏一样的效果。于是把兼容 IE6,IE7,FF 的”加入收藏”代码与之整合,实现兼容三大主流浏览器(IE、Firefox、Chrome)的“一键收藏”按钮。

实现代码:

<!-- 加入收藏代码 Start -->
function AddFavorite(sURL, sTitle) {

More >

比较拉风的特效尝试

正如你所看到的,小博的主题有了些变化,写篇文章记录之。

这个修改灵感来自于Android自2.1版本开始引入的动态壁纸效果,前景仍然是静态的图标、时钟、播放器微件之类,但背景一动起来,立体效果就多少有了一些。

兼容性:ie就没办法啦,就用原本主题的样式;Opera, FireFox, Chrome, Safari几个浏览器都支持canvas,Chrome下浏览体验最佳,在偶的机子上用Firefox打开博客略卡。

好处,增加网页的动态效果,打破传统网页背景不变前景变的惯势,当然,这还要归功于HTML5这类新技术的支持,动态背景的思路会否引发一场新的设计潮流,天知道;另一方面由于去掉了背景图片,修改后页面加载速度明显加快。

缺陷,新访客开始可能不能适应,注意力容易从内容分散到背景的变化。好在鼠标在内容部分时,背景色较鼠标移到外围区域时来得缓和,貌似鲜艳的颜色容易使人不淡定 不利于阅读, More >

JavaScript 框架

由于不同 Web 浏览器所支持DOM标准版本不尽相同,与 HTML 和 CSS一样,不同的浏览器有不同的 JavaScript 实现方式。这使得早期 JavaScript 代码实现跨浏览器兼容成为一场噩梦。

就拿网站右下角常见的浮动提示框举例:

  1. 首先,必须通过判断getElementById() 方法存在与否来决定是用document.getElementById(“floater”).style还是document.floater方法进行浮动框定位;
  2. 要想把浮动内容固定在右下角,脚本需要知道可用页面的宽度和高度,这时又得考虑不同浏览器上访问这些对象的方法也存在window.innerHeight和document.body.clientHeight的差异;
  3. 针对上下或左右滚动页面时浮动内容也需要随着页面移动,又需要考虑是用window.pageXOffset方法还是document.body.scrollLeft方法。。。

而使用JavaScript 框架就清净多了,比如jQuery就有专门的Floatbox库扩展,一句$.floatbox({content: “xxxx” );就能搞定,要是心情好还可以考虑是否加入渐变效果啥的,jQuery库在众多流行的 Web 浏览器版本上进行了可靠性测试,我们可以放心地使用这些框架,产生的JavaScript代码将会在不同浏览器和平台上以类似的方式工作。 More >

移动设备浏览当前页