JavaScript實現(xiàn)獲取遠程的html到當前頁面中
更新時間：2017年03月26日 11:18:43 投稿：hebedich
今天做個項目，需要在當前的html頁面中引用一個遠程的html頁面，百度了一下，發(fā)現(xiàn)一個非常好用的代碼，這里分享給大家，有相同需求的小伙伴可以來看看
html代碼
<div id="includeHtml"></div>
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("函數(shù)clientSideInclude無法找到id " + id + "。" +
"你的網(wǎng)頁中必須有一個含有這個id的div 或 span 標簽。");
return;
}
if (req) {
// 同步請求，等待收到全部內(nèi)容
req.open('GET', url, false);
req.send(null);
if (req.status == 404) {
clientSideInclude(id, 'error.html')
} else {
element.innerHTML = req.responseText;
}
} else {
element.innerHTML =
"對不起，你的瀏覽器不支持" +
"XMLHTTPRequest 對象。這個網(wǎng)頁的顯示要求" +
"Internet Explorer 5 以上版本, " +
"或 Firefox 或 Safari 瀏覽器，也可能會有其他可兼容的瀏覽器存在。";
}
}
clientSideInclude(includeHtml, "http://XXXXX.html");//頁面中的一個div的id為includeHtml
用法很簡單，代碼里已經(jīng)注釋了，這里在簡單描述下，給那些不看注釋的人看吧
js代碼在當前頁面加載或者做成js文件加載進來，然后遠端的代碼會自動寫入到當前頁面里id號為 includehtml的DIV里面
相關文章
這篇文章主要介紹了純js實現(xiàn)遮罩層效果，下面就它的原理做下分析，感興趣的朋友可以參考下2014-05-05
JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化（一）
這篇文章主要介紹了JavaScript實現(xiàn)跑馬燈抽獎活動實例代碼解析與優(yōu)化（一）的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了JS跨域請求外部服務器的資源，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
layui實現(xiàn)左側菜單點擊右側內(nèi)容區(qū)顯示
這篇文章主要為大家詳細介紹了layui實現(xiàn)左側菜單點擊右側內(nèi)容區(qū)顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了4個值得收藏的Javascript技巧，文章首先通過變量轉字符串展開主題詳情，需要的小伙伴可以參考一下2022-07-07
下面小編就為大家?guī)硪黄鶭S獲取元素的位置與尺寸實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
理解Javascript_09_Function與Object
在《理解Javascript_08_函數(shù)對象》中講解了很多函數(shù)對象的問題，同時也留下了許多疑問，今天讓我們來解答部分問題。2010-10-10
由于語言設計上的原因，JavaScript 沒有真正意義上“類”的概念。而通常使用的 new 命令實例化對象的方法，其實是對原型對象的實例化。2011-08-08
javascript實現(xiàn)的鼠標鏈接提示效果生成器代碼
javascript實現(xiàn)的鼠標鏈接提示效果生成器代碼...2007-06-06
原生js實現(xiàn)手風琴功能（支持橫縱向調(diào)用）
本文主要介紹了原生js實現(xiàn)手風琴功能（支持橫縱向調(diào)用）的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01