Question

我需要帮助将外部URL加载到DIV中。它不仅仅是$（“＃DIV-ID”）。load（URL），还有更多内容，所以让我解释一下我想要完成的事情。

说我有一个main.html页面看起来像这样（我跳过了jquery include和misc的东西所以不会让所有人感到困惑）

<!-- main.html -->
<script>
$(function(){ // document ready

    loadPage1 = function()
    {
        //alert("submit");
        var url = "page1.html"
        $("#content").load(url); 

    }
});
</script>

<div id="left">
    <a href="javascript:loadPage1()">Load Page 1</a>
</div>

上面的代码（main.html）运行正常。当我点击“加载页面1”链接时，它会将外部page1.html（下面）加载到DIV“内容”中。

<!-- page1.html -->
<script>
$(function(){ // document ready
    $("#content").load("leftMenu.asp"); 

    loadPage2 = function()
    {
        //alert("submit");
        var url = "page2.html"
        $("#content").load(url); 

    }
});
</script>
<div>
    <a href="javascript:loadPage2()">Load Page 2</a>
</div>

现在，我仍在使用从page1.html加载的新内容查看main.html，其中包含“加载页面2”链接。问题是，当我点击“加载页面2”链接时，它会在父页面中打开，不再停留在main.html页面中。

我想要做的是当我点击page1.html中的“加载页面2”时，它只是在相同的DIV“内容”中重新加载page2.html而不刷新整个页面或在父窗口中打开。< / p>

请帮忙。谢谢！

Answer 1

尝试一次定义您的函数（在main.html中）并使其足够灵活，从动态加载页面中的链接中获取href参数。这意味着您必须将要加载的页面的实际URL放在href而不是函数引用中，然后为锚标记创建一个新函数。我将使用.get()方法而不是.load()方法显示此内容：

main.html的HTML：

<!-- main.html -->
<div id="content"><h1>This is the main page content</h1></div>
<div id="left">
    <a href="page1.html">Load Page 1</a>
</div>
<script>
$(window).load(function(){
    loadPage = function(URL)
    {
    var content = $.get(URL, function(data){
        $('#content').html(data);
    });

    }
    //function to detect your link clicks (links should probably have some kind of class or ID, but I am keeping this simple to illustrate
    $('a').click(function(){
        var URL = $(this).attr('href');
        loadPage(URL);
        return false;
    });
});
</script>

然后，page1.html将不需要任何脚本，只需要加载你想要的下一页的链接：

<!-- page1.html -->
<h1>This is Page 1 content!</h1>
<div>
    <a href="page2.html">Load Page 2</a>
</div>

Answer 2

在你的loadpage对象中， var content = 我认为但是你想确定你可以命名那些东西;它与我认为的#content没有关系。感谢。

Jquery - 在DIV中加载外部页面

2 个答案: