威尼斯www.9778.com-威尼斯正版官方网站

监控 url fragment 的变化

日期:2019-12-25编辑作者:服务器&运维

当然,页面最好不要刷新,但是,拷贝一下浏览器的链接,又希望是下次能定位到你播发的那个视频。方法很简单,改变一下 url 的 fragment 就可以了。 监听fragment 的变化是这类编程的核心。在主流的浏览器里面 都有一个 onhashchange 的事件监听 fragment 的变化。 但是,他们的行为有些差异。在IE8 以前的 IE版本里面,当 window.location 对象迅速变化的情况下,onhashchange 不会触发,非常奇怪的bug。 下面我写的 onhashchange 事件 没有浏览器的差异。并且加入了一个功能,页面初始化的时候,如果 url 中 有 fragment ,也触发一下 onhashchange 事件。 复制代码 代码如下: function addFragmentChangeEvent { var source = document.URL; var url = source.split[0]; if { var base_hash = "#____base____hash____";//改变hash,使得页面初始化的时候触发一下事件函数。 window.location = url + base_hash; } var prevHash = window.location.hash; window.setInterval { if (window.location.hash != prevHash) { prevHash = window.location.hash; callback; if { window.location = source; } } 其实这个技巧是js 中间常用的技巧,模拟一个事件的作用。

     url 里面的 #后面的部分  可以实现无刷新的改变url 的值。这个特点非常有用。比如视频网站土豆中的豆单,你进入视频列表以后,点击播放某个视频。

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

 

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

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

 

 

 

图片 1图片 2代码

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 中间常用的技巧,模拟一个事件的作用。

 

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:监控 url fragment 的变化

关键词:

jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放

关键字“拖曳搜索”之“拖曳”功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键...

详细>>

jquery获取input表单值的代码_jquery_脚本之家

jquery取radio单选按钮的值 $("input[name='items']:checked").val();jqueryradio取值,checkbox取值,select取值,radio选中,checkbox选中,...

详细>>

javascript对象之内置对象Math使用方法_基础知识_脚本之家

一、Math.min,分别返回参数中的最小和最大值 例: alert //输出 "1"alert //输出 "3" 二、Math.abs(),返回参数的绝对值 例:...

详细>>

一套比较完整的javascript面试题_javascript技巧_脚本之家

一、单选题 1、以下哪条语句会发出运转错误:;//语法错误 B.var obj =[];//创设数组 C.var obj = {};//成立对象 D.var obj = //...

详细>>