2016-04-19 107 views
-1

我想在特定部門中顯示外部頁面內容。我發現了一些像iframe等解決方案,但沒有什麼幫助我很多。在特定部門中加載外部頁面內容

<ul class="nav nav-pills"> 
    <li class="active"> 
     <a data-toggle="pill" href="#home">Account Details</a> 
    </li> 
    <li>  
     <a data-toggle="pill" href="#menu1">Wish List</a> 
    </li> 
    <li> 
     <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE" ## 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
    </div> 
</div> 

我該怎麼做?基於Rorys'評論爲您的HTML

+0

http://api.jquery.com/load/ - 假設該網站允許外部請求。 –

+0

頁面正在加載,但與頁眉和頁腳:( – mani

回答

0

方法:

$("#home").load("/MTSITE/PAGE", function() { 
    console.log("Loaded content for home."); 
}); 

$("#menu1").load("/MTSITE/PAGE1", function() { 
    console.log("Loaded content for menu1."); 
}); 

$("#menu2").load("/MTSITE/PAGE2", function() { 
    console.log("Loaded content for menu2."); 
}); 

如果你不想登錄您的控制檯,您可以使用:

$("#menu2").load("/MTSITE/PAGE2"); 
+0

當我試圖添加頁面整個頁眉和頁腳來:( – mani

0

你可以做這樣的方式使用ajax。

的jsfiddle:https://jsfiddle.net/eua98tqa/10/

HTML:

<ul class="nav nav-pills"> 
<li class="active"> 
    <a data-toggle="pill" href="#home">Account Details</a> 
</li> 
<li>  
    <a data-toggle="pill" href="#menu1">Wish List</a> 
</li> 
<li> 
    <a data-toggle="pill" href="#menu2">Edit ACCOUNT</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div id="home" class="tab-pane fade in active"> 

</div> 
<div id="menu1" class="tab-pane fade"> 
     ## I WANT CONTENT OF "/MTSITE/PAGE1" ## 
</div> 
<div id="menu2" class="tab-pane fade"> 
    ## I WANT CONTENT OF "/MTSITE/PAGE2" ## 
</div> 
</div> 

的Javascript:

$.get('Your URL') 
.fail(function(xhr, err){ 
$('#home').append("No data"); 
}) 
.then(function(responseData) { 
    //responseData is the contents of the other page. Do whatever you want with it. 
    $('#home').append(responseData); 
}); 
+0

當我試圖添加頁面整個頁眉和頁腳來:( – mani

+0

請上傳您的代碼提琴,所以我可以調查.. – Bharat

相關問題