Question

我想在特定部门中显示外部页面内容。我找到了像iframes等一些解决方案，但没有什么能帮助我。

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

我该怎么做？

Answer 1

基于Rorys评论的html方法：

$("#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");

Answer 2

你可以使用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);
});

在特定部门中加载外部页面内容

2 个答案: