負載元件，之後頁面完全加載

Question

我有一個頁面（/ mysite的/第1頁）

本頁面使用加載其他頁面到自身的jQuery：

HTML：

<div id="header_container"></div> 
<div id="table_container"></div> 

Javascript：

$(document).ready(
    function(){ 
     $("#header_container").load("/mysite/header") 
     $("#table_container").load("/mysite/table") 
     } 
    ) 

現在，我想要第二個頁面（/ mysite/page2）只使用內容第1頁上的#table_container。

在第2頁，當我嘗試：

<div id="other_table_container"></div> 

和：

$("#other_table_container").load("/mysite/page1 #table_container") 

結果是空的，我想是因爲第1頁說：「我裝」的#table_container裝有前/ mysite的/表。

如何確保頁面1上的所有jQuery請求在加載到page2之前都已加載？

Answer 1

我能想到解決這個問題的唯一方法是在子iFrame中使用父回調。

考慮具有第1頁，一個隱藏的iframe頁2.

<iframe src="/mysite/page1" style="display:none"></iframe> 

上。在第2頁的源

function loadPage1() 
{ 
    $("#other_table_container").html($("iframe").contents()); 
} 

然後在頁面1

$(document).ready(
    function(){ 
     $("#header_container").load("/mysite/header", function(){ 
      $("#table_container").load("/mysite/table", function(){ 
       parent.loadPage1(); 
      )); 
     }); 
    } 
)); 

的源

如果您想從頁面1獲得特定的ID，如#table_container，則可以簡單地更改方法loadPage1()接受一個變量，loadPage1(html)：

function loadPage1(html) 
{ 
    $("#other_table_container").html(html); 
} 

，然後在第1頁來源：

$(document).ready(
    function(){ 
     $("#header_container").load("/mysite/header", function(){ 
      $("#table_container").load("/mysite/table", function(){ 
       parent.loadPage1($("#table_container").html()); 
      )); 
     }); 
    } 
)); 

Answer 2

你可以嘗試這樣的：

$(document).ready(function() { 
    $("#header_container").load("/mysite/header"); 
    $("#table_container").load("/mysite/table", function() { 
     // #other_table_container shouldn't be loaded until #table_container is loaded 
     $("#other_table_container").load("/mysite/page1 #table_container") 
    }); 
}); 

見http://api.jquery.com/load/下的回調函數部分。