Day: June 11, 2015

不刷新改变URL: pushState + Ajax

  如果你玩过Google+,看到过YouTube的新界面,便会体验到这个HTML5的新功能。使用pushState + Ajax(pjax),可以实现网页的ajax加载,同时又能完成URL的改变而没有网页跳转刷新的迹象,就像是改变了网页的hash(#)一样。   效果如下:实例DEMO 1   |   实例DEMO 2    |   实例DEMO 3     旧的解决方案 曾说SEO和ajax是天敌。此前从Twitter开始流行Ajax+hash的方式调用内容,Google给出的解决方案是“#!~string”自动转换为“?_excaped_fragment_=~string”来抓取动态内容。但这无疑会非常麻烦:首先你需要对网站进行“?_excaped_fragment_=~string”的处理配置,而且,如果用户把网址“http://example.com/#!/~string”直接复制并分享的话,意味着网页还必须监听hashchange。不过如果你觉得这个#!很好看就没关系了。   新的解决方案:… Read More

jQuery hash 插件

URL中的hash,也就是网址井号后面的部分,其实是一块宝地,它能创建浏览历史,也能存储一些简单数据。从Twitter开始Hash被用来定义Ajax内容,虽然如今已被HTML5的pushState所替代。这里介绍jQuery Hash 插件,可以帮助你完成简单数据的存储。 Hash存储数据有什么用 首先传统URL传递数据的弊端是,对搜索引擎不友好,搜索引擎会认为 /example和/example?key=val是不同的网址,然而hash则不同,搜索引擎认为 /example 和 /exmaple#;key=val 会是两个完全相同的网页。此外,用hash存储数据也不必刷新页面。 hash可以作为一种本地临时存储的解决方案,正如cookie那样。可以在url中保存临时的用户状态这是cookie做不了的。例如含有Ajax页面的刷新,就可以直接利用hash存储当前的状态。再例如你可以配合Hashchange监听来完成一些事情。 这算是一个尝试,虽然目前少有人在hash存数据上作文章,但是如果你真的需要,可以用这个插件参考一下。 看看什么样子的 下图即是一个实例,网址正常部分是example.com/demo,然后在网址hash中存了数据keyA=valA和keyB=valB;它们之间用分号“;”隔开,第一个key名前也有分号。 如果要用传统URL传递,则是example.com/demo?keyA=valA&keyB=valB的样子。 另外,如果URL本身带有一段hash,比如存在网页本身的锚点书签跳转,再储存数据时则可以是这样: 其中index并不是数据,前面带有分号的才是数据。很容易区分。 怎样使用jQuery… Read More

用history api”偷换”浏览器历史记录

HTML5提供了新的history接口,例如pushstate,以及popstate。通常情况下,浏览器的历史记录能保存访问历史,但是因为有了history api,pushstate和replacestate,我们甚至可以“偷换掉”浏览器的历史记录,偷走后退按钮,让浏览者点按“后退按钮”时,到一个你指定的网页,看起来就像是真的后退历史记录一样!这个网页还可以跨域,而且就算不存在向前d历史记录也能创建。有什么好处呢?想让访客更多的留在你的网站上?想要……? 用history api”偷走”浏览器后退按钮 实现代码如下: 第一步,创建一个历史 这一步创建一个带有hash的历史,方便popstate监听. 第二步,监听并跳转 当按下后退按钮时,检查到有#!/stealingyourhistory的hash时,则利用setTimeout函数来跳转到你指定的网页,例如设计为按下后退按钮后,不是返回上一个历史记录而是到博客主页 全部实现代码如下 (function(window, location) { history.replaceState(null, document.title, location.pathname+"#!/stealingyourhistory"); history.pushState(null, document.title,… Read More

网页检测 AdBlock 的 6 种方法

有些网页上充斥着令人厌恶的广告,这些广告不仅阻碍了信息的获取,有的还严重影响了浏览者的心情。特别是某些毫不相关的多媒体广告和弹出式窗口,不仅让人感到被骚扰,还很容易误点到,浪费宝贵的时间。由此便诞生了大名鼎鼎的跨平台 AdBlock 插件,在任何主流浏览器上都有它的扩展或插件,用户可以安装它并屏蔽绝大多数的广告。 既然 AdBlock 有检测广告并屏蔽它们的方法,作为网页制作者,其实也有反过来检测 AdBlock 的方法。 为什么要检测 AdBlock 这是一个有争论的问题:用户有选择不看广告、在浏览器页面上销毁广告的权利,网站也有捆绑广告和信息一同派发给你并收取广告商展示费用的自由。这两者都不能互相干预,并且在没有明确法律法规的环境下,你可以防范我,我也可以防范你。 除了向 AdBlock 直接提交 “可接受的广告网站” 申请进入白名单以要求直接免受屏蔽之外,下面介绍 6 种从网站本身出发的检测… Read More