首頁 > web前端 > js教程 > JavaScript實作取得遠端的html到目前頁面中的範例程式碼分享

JavaScript實作取得遠端的html到目前頁面中的範例程式碼分享

黄舟
發布: 2017-03-27 14:21:54
原創
1809 人瀏覽過

今天做個項目,需要在目前的html頁面中引用一個遠端的html頁面,百度了一下,發現一個非常好用的程式碼,這裡分享給大家,有相同需求的小夥伴可以來看看

html程式碼

<p id="includeHtml"></p>
登入後複製

javascript程式碼

function clientSideInclude(id, url) {
  var req = false;
  // Safari, Firefox, 及其他非微软浏览器
  if (window.XMLHttpRequest) {
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      req = false;
    }
  } else if (window.ActiveXObject) {

    // For Internet Explorer on Windows
    try {
      req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        req = false;
      }
    }
  }
  var element = document.getElementById(id);
  if (!element) {
    alert("函数clientSideInclude无法找到id " + id + "。" +
      "你的网页中必须有一个含有这个id的p 或 span 标签。");
    return;
  }
  if (req) {
    // 同步请求,等待收到全部内容
    req.open(&#39;GET&#39;, url, false);
    req.send(null);
    if (req.status == 404) {
      clientSideInclude(id, &#39;error.html&#39;)
    } else {
      element.innerHTML = req.responseText;
    }
  } else {
    element.innerHTML =
      "对不起,你的浏览器不支持" +
      "XMLHTTPRequest 对象。这个网页的显示要求" +
      "Internet Explorer 5 以上版本, " +
      "或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
  }
}

clientSideInclude(includeHtml, "http://XXXXX.html");//页面中的一个p的id为includeHtml
登入後複製

用法很簡單,程式碼裡已經註解了,這裡在簡單描述下,給那些不看註釋的人看吧

js程式碼在目前頁面載入或做成js檔案載入進來,然後遠端的程式碼會自動寫入到目前頁面裡id號為includehtml的p裡面

以上是JavaScript實作取得遠端的html到目前頁面中的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板