负载元件，之后页面完全加载

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/下的回调函数部分。