Question

我有三个链接：

    <div class="btn-group btn-group-justified">
        <a class="btn btn-default" href="#" onclick="changeSite('all.html')">All</a>
        <a class="btn btn-default" href="#" onclick="changeSite('new.html')">New</a>
        <a class="btn btn-default" href="#" onclick="changeSite('random.html')">Random</a>
    </div>

如何在onclick上看到函数changeSite被触发：

var changeSite = function(pathName){
    document.getElementById("siteContent").innerHTML = 
}

在此功能的帮助下，我想将ID为siteContent的div内容替换为all.html, new.html或random.html的内容。这三个站点位于同一个文件夹中，例如我的index.html，其中实际触发了代码。如何将.innerHTML设置为其中一个网站的内容？谢谢！

Answer 1

可选：当您说“外部网站”时，通常意味着资源托管在与提供初始页面的服务器不同的服务器上。您的外部服务器需要配置为支持JSONP或使用适当的CORS headers进行响应以允许跨站点ajax。

然后，您可以使用XMLHttpRequest或jQuery.ajax向网站请求数据，并将其放入模板中。

你可以使用jQuery，但没有它就很简单：

var changeSite = function(pathName) {
  var r = new XMLHttpRequest();
  r.onreadystatechange = function() {
    if (this.readyState == 4) {
      document.getElementById("siteContent").innerHTML = this.responseText;
    }
  }
  r.open('get', pathName, true);
  r.send();
}

Answer 2

jquery load函数允许您指定要加载的元素ID

$('#<id to load html to>').load('xyz.html');

http://api.jquery.com/load/

将div的innerHTML替换为外部html站点

2 个答案: