Question

我有一个页面（/ mysite / page1）

此页面使用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")

结果是空的，我想是因为在#table_container加载了/ mysite / table之前，page1说“我已经加载了”。

如何确保第1页上的所有jQuery请求在加载到page2之前都已加载？

Answer 1

我能想到解决这个问题的唯一方法是在子iFrame中使用父回调。

考虑在第2页的隐藏iframe中使用第1页。

<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/。

在页面完全加载后从页面加载元素

2 个答案: