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

时间:2014-01-21 17:47:00

标签: javascript html

我有三个链接:

    <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.htmlrandom.html的内容。这三个站点位于同一个文件夹中,例如我的index.html,其中实际触发了代码。如何将.innerHTML设置为其中一个网站的内容?谢谢!

2 个答案:

答案 0 :(得分:0)

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

然后,您可以使用XMLHttpRequestjQuery.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();
}

答案 1 :(得分:0)

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

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

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