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中加載外部頁面

回答

相關問題