JavaScript/jQuery - 頁面之間的導航

我想知道哪些是使用ajax調用在頁面之間導航的正確方法。JavaScript/jQuery - 頁面之間的導航

一個例子，我們得到了這3個html頁面。

users.html（與users.js它初始化它，並具有其自己的函數）
cars.html（與初始化並具有其自己的函數cars.js）
bills.html（與bills.js初始化它，並有它自己的功能）

什麼是正確的方式，從users.html cars.html？我遇到了這個問題，因爲我不知道如何在users.html中執行ajax調用之後「加載」cars.js。

¿如果我加載$ .getScript（），如何在添加cars.js之後刪除users.js？

謝謝。

來源

2015-05-09 QoP

有沒有你不能僅僅定位在通常的方式一些特別的原因嗎？ –

@ T.J。Crowder我想在頁面之間添加轉換/動畫 – QoP

然後，只需在文檔上添加淡入淡出效果，並在導航上添加淡入淡出效果。 – Roberto

您可以嘗試構建SPA（單頁應用程序）。您將有一個索引html文件使用其他html文件作爲模板。例如，您有一個div主容器，點擊鏈接後其內容將替換爲users.html/cars.html/bills.html。

路由可以幫助您在不刷新頁面的情況下完成任務。它也支持歷史。
查找依賴注入，以便您瞭解如何只下載依賴的js文件。

如果你不使用路由，並且你只改變頁面內容，你會失去歷史，這是一個非常乾淨的事情。

SPA with Routing and Templating
Routing with Sammy.js

例子：

<body> 
<a href="#/cars">Cars</a> 
<a href="#/bills">Bills</a> 
<div id="wrapper"></div> 
<script src="jquery.js"></script> 
<script src="sammy.js"></script> 
<script> 
    (function() { 
     app.router = Sammy(function() { 

      var selector = '#wrapper'; 

      this.get('#/cars', function() { 
       $.get('cars.html', function (view) { 
        $(selector).html(view); 
       }); 
      this.get('#/bills', function() { 
       $.get('bills.html', function (view) { 
        $(selector).html(view); 
       });     
      }); 

     }); 
     app.router.run('#/cars'); //Link to load on app opening 
    }()); 
</script> 
</body>

來源

2015-05-09 13:23:32 Dulev

您可以致電與$獲得（）頁面像

$.get("cars.html", function(data) { 
    $(document).html(data); 
    alert("Load was performed."); 
});

在cars.js使用所有功能與$（文件）。就緒（）但所有的功能必須是：

$(document).on("yourevent","selector",function(){ 

});

，而你加載，如果你將其導入cars.html頁閱讀頁面cars.js將加載更多jquery.get()和jquery.on()

來源

2015-05-09 13:01:17 Yehia

如果這樣做的唯一原因是頁面轉換（每OP的評論），那麼它只是似乎更好地做到在每一頁上，並不會加載網頁內容通過ajax。而OP似乎沒有在項目中使用任何頁面模板或母版頁。

例在普通的JavaScript：

<html> 
 
    <body style="opacity:0; "> 
 
    
 
    
 
    <h1>Page Title</h1> 
 
    <img src="http://static.europosters.cz/image/750/metallschilder/fiat-500-i5193.jpg"> 
 
    
 
    <script type="text/javascript"> 
 
     
 
     var opacity = 0; 
 
     
 
     var timerID = setInterval(
 
     function() { 
 
      opacity += 5; 
 
      if (opacity >=100) { 
 
       clearInterval(timerId); 
 
       opacity = 100; 
 
      } 
 
      document.body.style.opacity = opacity /100; 
 
      
 
     }, 100); 
 
    
 
    </script> 
 
    
 
    </body> 
 
    
 
</html>

來源

2015-05-09 14:02:45 Roberto

JavaScript/jQuery - 頁面之間的導航

回答

相關問題