监控 url fragment变化的js代码

当然，页面最好不要刷新，但是，拷贝一下浏览器的链接，又希望是下次能定位到你播发的那个视频。方法很简单，改变一下 url 的 fragment 就可以了。

监听fragment 的变化是这类编程的核心。在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化。
但是，他们的行为有些差异。在IE8 以前的 IE版本里面，当 window.location 对象迅速变化的情况下，onhashchange 不会触发，非常奇怪的bug。

下面我写的 onhashchange 事件 没有浏览器的差异。并且加入了一个功能，页面初始化的时候，如果 url 中 有 fragment ，也触发一下
onhashchange 事件。

代码如下:

function addFragmentChangeEvent(callback)
{
var source = document.URL;
var url = source.split("#")[0];
if (window.location.hash)
{
var base_hash = "#____base____hash____";//改变hash，使得页面初始化的时候触发一下事件函数。
window.location = url + base_hash;
}
var prevHash = window.location.hash;
window.setInterval(
function()
{
if (window.location.hash != prevHash)
{
prevHash = window.location.hash;
callback(prevHash);
}
}, 100);
if (window.location.hash)
{
window.location = source;
}
}

其实这个技巧是js 中间常用的技巧，模拟一个事件的作用。

赞 (0)

相关推荐

  • Vue中fragment.js使用方法详解

    大部分内容源自 jQuery,当然,同时也参考了 component/domify ,如果有兴趣去这翻阅原始的代码,可以到 jQuery 中查找 wrapMap:至于 domify,直接到 github 搜索即可,相关项目类容很少,直接看 index.js 就行了. createDocumentFragment 如果要在一个节点上一次性插入多个元素怎么办,比如说一次插入 10000 个节点? 最简单粗暴的方式就是: var parent = document.getElementById('pa

  • JavaScript Tips 使用DocumentFragment加快DOM渲染速度

    大家在使用JavaScript的时候,DOM操作是最平常不过的了, 随着Web前端技术的发展,我们越来越多的使用JS来操作DOM元素,比如通过ajax请求获取到数据,然后更新页面上的元素,一般情况下,这种操作我们会用类似node.appendChild()这中方式来完成.这个方法是无缓冲的,也就是说我们每次调用appendChild方法的时候,浏览器都会重新渲染页面.当然,使用这种方法也没有什么不行,因为我们在一般情况下都是对少量的DOM节点进行更新,也并不会带来太大的性能问题,但是如果大量的更

  • 关于javascript document.createDocumentFragment()

    他支持以下DOM2方法: appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild. 也支持以下DOM2屬性: attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ow

  • 浅析document.createDocumentFragment()与js效率

    document.createDocumentFragment()说白了就是为了节约使用DOM.每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间.为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中.这是我写的一个简单的测试页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

  • JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

    在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body

  • 监控 url fragment变化的js代码

    当然,页面最好不要刷新,但是,拷贝一下浏览器的链接,又希望是下次能定位到你播发的那个视频.方法很简单,改变一下 url 的 fragment 就可以了. 监听fragment 的变化是这类编程的核心.在主流的浏览器(IE firefox)里面 都有一个 onhashchange 的事件监听 fragment 的变化. 但是,他们的行为有些差异.在IE8 以前的 IE版本里面,当 window.location 对象迅速变化的情况下,onhashchange 不会触发,非常奇怪的bug. 下面我写

  • Iframe 自适应高度并实时监控高度变化的js代码

    google N次 + 百度M次 + 试验了1605次之后(听说农药1605就是实验了这么多次后出来的),得出下面成果,在IE7及Firefox3里试了下还能凑合着用用! 1.首先给出个Iframe. 复制代码 代码如下: <iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder=&

  • 让多个输入框中的内容同时变化的js代码

    var input_arr = document.getElementsByName('word'); var len = input_arr.length; for(var i=0; i [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 定义和用法 onkeyup 事件会在键盘按键被松开时发生. 语法 onkeyup="SomeJavaScriptCode"参数 描述 SomeJavaScriptCode 必需.规定该事件发生时执行的 JavaScript. 支持该事件的

  • js 监控iframe URL的变化实例代码

    js 监控iframe URL的变化实例代码

    iframe的url可以前端任何地址,这样就可能出现漏洞,如果钓鱼网站通过js把src改成了危险地址,如果没有监控,就会有很大隐患.所以监控iframe的url变化就是必须要解决的问题了. 第一印象的解决方案是通过setInterval轮询监控,貌似不太理想了,而且有延迟. 千般搜索,终于找到了好的方法,可以通过H5新增的MutationObserver来解决,配合DOMAttrModified和onpropertychange来解决兼容性问题. 废话少说,直接上代码. index.html代码

  • js实现无刷新监听URL的变化示例代码详解

    无刷新改变路由的两种方法通过hash改变路由 代码 window.location.hash='edit' 效果 http://xxxx/#edit 通过history改变路由 history.back(): 返回浏览器会话历史中的上一页,跟浏览器的回退按钮功能相同 history.forward():指向浏览器会话历史中的下一页,跟浏览器的前进按钮相同 history.go(): 可以跳转到浏览器会话历史中的指定的某一个记录页 history.pushState()可以将给定的数据压入到浏览器

  • 浅析JS获取url中的参数实例代码

    js获取url中的参数代码如下所示,代码简单易懂,附有注释,写的不好还请见谅! function UrlSearch() { var name, value; var str = location.href; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&&

  • JS实现移动端实时监听输入框变化的实例代码

    JS实现移动端实时监听输入框变化的实例代码

    如果是在pc端,监听输入框你可能想到focus.blur.hover.onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异.那么怎么解决呢? 方案一 以前做一个简单的模糊搜索框的需求,大致思路是定义一个1s左右执行的定时器,定时器函数里面的逻辑是 判断文本框内容的长度,如果跟上一次长度有变化,就走一遍查询,如果没有变化不执行任何操作. 方案二 利用jquery提供的 input propertychange

  • js实时获取窗口大小变化的实例代码

    如下所示: $(window).resize(function(){ var Height = $(window).height(); var Width = $(window).width(); }) 以上这篇js实时获取窗口大小变化的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 返回上一个url并刷新界面的js代码

    JS 重载页面,本地刷新,返回上一页 <a href="javascript:history.go(-1)" rel="external nofollow" >返回上一页</a> <a href="javascript:location.reload()" rel="external nofollow" >重载页面,本地刷新</a> <a href="javasc

  • java.nio.file.WatchService 实时监控文件变化的示例代码

    java.nio.file.WatchService 实时监控文件变化的示例代码

    目录 1.示例代码 2.其实并没有实时 在平时的开发过程中,会有很多场景需要实时监听文件的变化,如下:1.通过实时监控 mysql 的 binlog 日志实现数据同步2.修改配置文件后,希望系统可以实时感知3.应用系统将日志写入文件中,日志监控系统可以实时抓取日志,分析日志内容并进行报警4.类似 ide 工具,可以实时感知管理的工程下的文件变更 在 Java 语言中,从 JDK7 开始,新增了java.nio.file.WatchService类,用来实时监控文件的变化. 1.示例代码 File

随机推荐