今天做個項目,需要在目前的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('GET', url, false); req.send(null); if (req.status == 404) { clientSideInclude(id, 'error.html') } 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中文網其他相關文章!