Question

我正在开发一个音乐播放网站，并使用jplayer播放音乐，但问题是我不想在新页面加载时停止播放音乐，所以我想在div中加载我的所有页面ajax在这种情况下，容器是＆＃34; #main-container＆＃34;并且一件重要的事情是我想在使用ajax加载时继续显示页面URL。这是我目前使用的代码。

<div id="vertical-menu">
         <!--<h2 class="logo">LOGO</h2>-->
         <div class="logo">
         <span class="arcd-male97"></span> 
         <h2 class="logo-name">AMR</h2>
         <h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
         </div>
                <ul class="menu-items">
                    <li>
                        <a  href="/index.php"><i class="arcd-archive"></i></br>Browse</a>                             
                    </li>
                    <li>
                        <a  href="../Top-albums/Top_albums_Pop.php"><i class="arcd-music97"></i></br>Top albums</a>                            
                    </li>
                    <li>
                        <a  href="../Top-artists/Top_artists_Pop.php"><i class="arcd-microphone52"></i></br>Top artists</a>                            
                    </li>
                    <li>
                        <a  href="../Top-lists/Top_lists_Pop.php"><i class="arcd-numbered8"></i></br>Top lists</a>
                    </li>
                    <li>
                        <a  href="../Charts/Charts_Pop.php"><i class="arcd-rising9"></i></br>Charts</a>
                    </li>                        
                </ul>

    </div>

这是div容器，我想播种加载页面内容。默认情况下你看到它有一些内容但我应该用加载页面内容替换它们。感谢

<div id="main-container"> <!-- start main container-->
    <!--start header-->
    <div class="header_container" id="header_container"> <!--start header div-->
        <div id="header_titles">
            <h1 class="homepage-heading">Browse</h1>
            <div class="home-page-title"><h2 >select</h2></div>
            <h2 class="homepage-subheading">GENRES & MOODS</h2> 
        </div>  
    </div> <!--end header div-->
<!--includes tabnav menu-->
<?php include   ("/includes/tabnav_Browse.php"); ?>
<ul id="generes-moods_container">
          <li style="padding-top: 18.5px;">
              <a class="pop" href="#"><i class="arcd-microphone48" ></i>pop</a>
          </li>  
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="country" href="#"><i class="arcd-guitar" ></i>country</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Rock" href="#"><i class="arcd-electric13" ></i>Rock</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Blues" href="#"><i class="arcd-harmonic" ></i>Blues</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="EDM" href="#"><i class="arcd-disc62" ></i>EDM</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Jazz" href="#"><i class="arcd-trumpet12" ></i>Jazz</a>
          </li>
          <li style="padding-top: 18.5px;">
              <a class="RnB" href="#"><i class="arcd-guitar" ></i>R&B</a>
          </li>  
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Hip_hop" href="#"><i class="arcd-musicplayer1" ></i>Hip hop</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Reggae" href="#"><i class="arcd-guitar" ></i>Reggae</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Classical" href="#"><i class="arcd-violin62" ></i>Classical</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="Folk" href="#"><i class="arcd-guitar92" ></i>Folk</a>
          </li>
          <li style="padding-left: 18.2px; padding-top: 18.5px;">
              <a class="soul" href="#"><i class="arcd-guitar" ></i>soul</a>
          </li>  
 </ul>
</div> <!--end main container-->

Answer 1

这是一项艰巨的任务，有很多起伏，从头开始制作ajax历史网站。您需要将状态推送到窗口，以便浏览器知道您希望它在其历史记录中记录的更新。

以下解释了它。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

有许多预制脚本可供尝试简化此操作   你是下面的一个例子。

http://tkyk.github.io/jquery-history-plugin/（不再维护）

https://github.com/cowboy/jquery-hashchange

简单的历史记录示例：

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}

就像我说它不是一件简单的事情，一个“快速”的例子并不容易。您需要考虑很多因素，例如浏览器类型以及刷新页面时它的反应等。

jQuery ajax更新div示例：

<div id="pagediv">Default text in the div.</div>
<script>
$(document).ready(function (){
    $.ajax({                                      
      url: '/echo/html/',              
      type: "post",   
      data: {
          html: "<p>Text echoed back to request</p>",
          delay: 3
      },             
      beforeSend: function() {
          $('#pagediv').html("loading..");
          },
      success:  function(data) {
          $('#pagediv').html(data);
          },
   });
});
</script>

这是使用jQuery完成的，易于使用。

FIDDLE

如何通过带有历史记录的ajax动态加载页面

1 个答案: