我回来后的动态网页

Question

我是一个比较新的网页设计师。我当前的问题是我有一个动态加载内容和修改历史记录的网页。当网页从一个页面切换到另一个页面时，我能够动态更改内容，但是当我离开网站并使用历史记录返回它时，我不断收到 404 页面未找到。有什么办法可以解决这个问题吗？

<script type="text/javascript">
$(document).ready(function(){
    $(function() {
         $('#bodywrap').load('/common/index.php');

         $('ul#nav li a').click(function(e) {
             $("#loading").show();
             href = $(this).attr("href");
             loadContent(href);
             // HISTORY.PUSHSTATE
             history.pushState('', '', href);
             e.preventDefault();
         });
         $(window).bind('popstate', function(event) {
             $("#loading").show();
             console.log("pathname: "+location.pathname);
             loadContent(location.pathname);
         });
    });
    function loadContent(url){
        // USES JQUERY TO LOAD THE CONTENT
        $('#bodywrap').load('/common/'+url+'.php');
        $("#loading").hide();
        $('li').removeClass('active');
        $('a[href="'+url+'"]').parent().addClass('active');
    }
});
</script>

Answer 1

我为我的项目 http://forkphp.com 创建了相同的功能，您可以使用此代码进行一些更改。

$(document).on('click','.changepage',function () {

          // body...
          prev = window.location; 
          next = "<?php echo $this->appBase(); ?>"+url; // url to load
          var url = 'YOUR_URL';
          var target = $(this).attr('target'); // body in your case
        $.ajax(
            {
              url:"<?php echo $this->appBase(); ?>"+url,
              method:'POST',
              data:{terminal:1},
              dataType:'json',
              beforeSend:function(){
              //  $(target).disablify(); // show loader
              },
              success:function(data)
              {

              $(target).html(data.html);
               document.title = data.title;
              // $(target).enablify(); // hide loader
               window.history.pushState({"html":data.html,"pageTitle":"history"},"", "<?php echo $this->appBase(); ?>"+url);
              }
            });
      });

Answer 2

使用散列，这样底层网络服务器就不会试图在那里找到实际的文档。请记住，Web 服务器路由器首先运行。此外，您需要检查加载时的哈希值，以便在从历史记录重新加载或直接访问时提取正确的内容。试试这个：

$(document).ready(function(){
    $(function() {
        $('#bodywrap').load('common/index.php');
        // Handle page load
        loadHref();
        // handle link click
        $('ul#nav li a').click(function(e) {
            $("#loading").show();
            href = $(this).attr("href").substr(1);
            loadContent(href);
            // HISTORY.PUSHSTATE
            history.pushState('', '', $(this).attr("href"));
            e.preventDefault();
        });
        // Handle popstate
        $(window).bind('popstate', function(event) {
            $("#loading").show();
            loadHref();
        });
    });
    function loadContent(url){
        // USES JQUERY TO LOAD THE CONTENT
        $('#bodywrap').load('common/'+url+'.php');
        $("#loading").hide();
        $('li').removeClass('active');
        $('a[href="'+url+'"]').parent().addClass('active');
    }
    function loadHref() {
        var href;
        var loadHref = window.location.href;
        if (loadHref.indexOf('#') > -1) {
            href = loadHref.substr(loadHref.lastIndexOf('#') + 1);
            loadContent(href);
        }
    }
});

请注意，您的链接需要散列：

<a href="#about">About</a>

我回来后的动态网页

dynamic web page after i come back

html

ajax

jquery

history

dynamic