Jquery - 在DIV中加载外部页面

我需要帮助将外部URL加载到DIV中。它不仅仅是$（“#DIV-ID”）.load（URL），但是还有一点点，所以让我解释一下我想完成的事情。Jquery - 在DIV中加载外部页面

说，我有一个main.html中的页面看起来像这样（我跳过了jQuery包括和其它的东西，所以它不会混淆每个人）

<!-- 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>

现在，我仍然看与它有一个链接“载入第2页的” page1.html加载新的内容的main.html中。问题是当我点击链接“加载页面2”时，它会在父页面中打开，不再保留在main.html页面中。

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

请帮忙。谢谢！

来源

2016-02-04 Milacay

没有显示的功能应该工作，因为它们不在href代码所需的全局命名空间中。看看在控制台中抛出的错误。你确定你正确地复制了代码来提问吗？ – charlietfl

由于我的网页有很多东西在里面。我缩短了版本，所以我可以更容易地解释它。假设该页面包含jquery文件，全局名称空间...并且它工作正常，直到最后一个链接“加载页面2”打开页面作为父窗口，而不是DIV“内容” – Milacay

尝试定义你的函数一次（在main.html中），并使其具有足够的灵活性，以在动态加载页面的链接把href参数。这意味着你将不得不把你想要加载的页面的实际URL放在href而不是你的函数引用中，然后为你的锚标签创建一个新的函数。我将显示此使用.get()方法，而不是方法：

HTML的main.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>

来源

2016-02-04 20:54:24 CreMedian

谢谢你的帮助。我只是测试了你的方法，并打开了page1.html，但它在父窗口中打开。我想要做的是在DIV“内容”中加载page1.html，并在main.html页面上保留其他DIV ID =“left”和其他所有内容。我使用DIV ID =“左”作为导航菜单。 – Milacay

我只是仔细检查了我的代码并在本地进行了测试 - 我忘记了'返回false';在锚按钮函数（如虚拟）上，并且如果您没有明白，您的页面就会像正常链接一样重定向。修复后，我可以将页面内容加载到'＃content' div中并保留'＃left' div。因此，你可以把你所有的链接放在持久的'＃left' div中。代码在上面更新以捕捉错误。 – CreMedian

它只适用于第一个链接“加载页面1”。在“内容”中加载page1.html后，点击“加载页面2”，它将作为正常链接重定向。我想加载page2。HTML在相同的“内容”，并仍然有左边的DIV与“加载页面1”链接。那可能吗？ – Milacay

在你loadpage对象时，VAR含量=我想，但要确保你可能把任何东西;它与我假定的#content无关。谢谢。

来源

2016-02-12 00:25:45

Jquery - 在DIV中加载外部页面

回答

相关问题