Question

在History API中未执行初始pushState。当我在浏览器上直接输入http://finoy.in/history/about时，它不会更新内容。

<!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Simple History.js Ajax example by dansalmo</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/history.js/1.7.1/bundled/html5/jquery.history.js"></script>

        <style type='text/css'>
          .hidden {
            display: none;
            visibility: hidden;
          }
        </style>
      </head>
      <body>
        <a href="/history/home">Home</a>
        <a href="/history/about">About</a>
        <a href="/history/contact">Contact</a>
        <a href="/history/other">Other</a>

        <div id="content">
          <div id="home">Home Page content</div>
        </div>

        <div id="hidden_content" class="hidden"></div>
        <script type='text/javascript'>//<![CDATA[ 
      $(function(){
      var History = window.History;
      if (History.enabled) {
          State = History.getState();
          console.log(window.location.pathname)
          // set initial state to first page that was loaded
          History.pushState({urlPath: document.location.href}, $("title").text(), State.data.urlPath);
      } else {
          return false;
      }

      var loadAjaxContent = function(target, urlBase, selector) {
            var urlBase = '/history/demo.html';
          $(target).load(urlBase + ' ' + selector);
      };

      var updateContent = function(State) {
          //var selector = '#' + State.data.urlPath.substring(1);
          var selector = '#' + State.data.urlPath.split('/').pop();
        if ($(selector).length) { //content is already in #hidden_content
            $('#content').children().appendTo('#hidden_content');
            $(selector).appendTo('#content');
        } else { 
            $('#content').children().clone().appendTo('#hidden_content');
            loadAjaxContent('#content', State.url, selector);
        }
      };

      // Content update and back/forward button handler
      History.Adapter.bind(window, 'statechange', function() {
          updateContent(History.getState());
      });

      // navigation link handler
      $('body').on('click', 'a', function(e) {
          var urlPath = $(this).attr('href');
          var title = $(this).text();
          History.pushState({urlPath: urlPath}, title, urlPath);
          return false; // prevents default click action of <a ...>
      });

      });//]]>  

      </script>
      </body>

</html>

我已经在root（历史文件夹）中添加了一个包含以下内容的.htaccess文件：

# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

Answer 1

使用JavaScript更新网页时使用pushState，以便内容更改为其他网页的内容。

pushState将更改浏览器中的网址，以便可以复制/粘贴以进行链接。您仍然需要在服务器上创建其他页面。

目前，当您点击链接时，您展示/history/about内容的唯一代码才会运行。您还必须编写服务器端代码，以便从服务器提供完整格式的/history/about。

初始pushState未在History API中执行

1 个答案: