阿贾克斯网址#没有更新 [英] Ajax URL # isn't updating

查看:134
本文介绍了阿贾克斯网址#没有更新的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个小问题,在这里我的脚本。出于某种原因,它不会让#标签都有效,我不知道为什么。我创建了使用此教程帮助这个JavaScript。 (页面的装载运作良好,没有任何问题的。)

可能有人请看看它,并告诉我,为什么它不工作?

  VAR default_content =;

    $(文件)。就绪(函数(){//执行的页面加载后

        checkURL(); //检查URL引用了一个页面,将其

        $('UL李一)。点击(函数(五){//通过我们所有的导航链接遍历..

                checkURL(this.hash); // ..并为它们分配一个新的onclick事件,用自己的哈希值作为参数(#第1页为例)

        });

        的setInterval(checkURL(),250); //检查URL中的每250毫秒来检测改变,如果历史按钮已被使用

    });

    VAR lasturl =; //这里我们把当前的URL哈希

    功能checkURL(散)
    {
        如果散列= window.location.hash(哈希!); //如果没有提供参数,使用所述散列值从当前的地址

        如果(哈希!= lasturl)//如果散列值发生了变化
        {
            lasturl =散列; //更新当前哈希
            loadPage(散); //并加载了新的一页
        }
    }

    功能loadPage(URL)//即通过AJAX加载的页面功能
    {
        //相反剥离#page,只有
        //去掉了#使用URL的其余部分
        网址= url.replace('#','');

     $('#装载)的CSS('知名度','看得见')。 //显示旋转的GIF动画

         $阿贾克斯({
            键入:POST,
            网址:load_page.php
            数据:页面='+网址,
            数据类型:HTML,
            成功:函数(MSG){

                   如果(parseInt函数(MSG)!= 0)//如果没有错误
                {
                    $('#内容)HTML(MSG); //加载HTML返回到pageContet

                } $('#装载)的CSS('知名度','隐藏'); //并隐藏在旋转的GIF
            }

        });

    }
 

解决方案

您可以极大地增加一个功能,听 hashchange 事件,这样的简化:

  $(窗口)。在(hashchange,函数(){
    loadPage(window.location.hash);
});
 

这样,您就不需要处理的锚定时器或压倒一切的单击事件。

您也不必跟踪 lasthash ,因为 hashchange 甚至只会火当哈希修改。

I have a little problem with my script here. For some reason, it doesn't enable the #-tags and I don't know why. I created this javascript using the help of this tutorial. (The loading of the pages works well with no problems at all.)

Could someone please look it over and tell me why it doesn't work?

 var default_content="";

    $(document).ready(function(){   //executed after the page has loaded

        checkURL(); //check if the URL has a reference to a page and load it

        $('ul li a').click(function (e){    //traverse through all our navigation links..

                checkURL(this.hash);    //.. and assign them a new onclick event, using their own hash as a parameter (#page1 for example)

        });

        setInterval("checkURL()",250);  //check for a change in the URL every 250 ms to detect if the history buttons have been used

    });

    var lasturl=""; //here we store the current URL hash

    function checkURL(hash)
    {
        if(!hash) hash=window.location.hash;    //if no parameter is provided, use the hash value from the current address

        if(hash != lasturl) // if the hash value has changed
        {
            lasturl=hash;   //update the current hash
            loadPage(hash); // and load the new page
        }
    }

    function loadPage(url)  //the function that loads pages via AJAX
    {
        // Instead of stripping off #page, only 
        // strip off the # to use the rest of the URL
        url=url.replace('#','');

     $('#loading').css('visibility','visible'); //show the rotating gif animation

         $.ajax({
            type: "POST",
            url: "load_page.php",
            data: 'page='+url,
            dataType: "html",
            success: function(msg){

                   if(parseInt(msg)!=0) //if no errors
                {
                    $('#content').html(msg);    //load the returned html into pageContet

                }  $('#loading').css('visibility','hidden');//and hide the rotating gif
            }

        });

    }

解决方案

You can simplify this immensely by adding a function to listen to the hashchange event, like this:

$(window).on("hashchange", function() {
    loadPage(window.location.hash);
});

This way you don't need to deal with timers or overriding click events on anchors.

You also don't need to keep track of lasthash since the hashchange even will only fire when the hash changes.

这篇关于阿贾克斯网址#没有更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆