Home > Web Front-end > HTML Tutorial > JavaScript implements getting remote html to the current page

JavaScript implements getting remote html to the current page

不言
Release: 2018-06-05 14:35:30
Original
2512 people have browsed it

Today I am working on a project, and I need to reference a remote html page in the current html page. After searching on Baidu, I found a very easy-to-use code. I will share it with you here. Friends who have the same needs can take a look.

html code

<p id="includeHtml"></p>
Copy after login

javascript code

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
Copy after login

Usage is very simple , the code has been commented, here is a brief description for those who don’t read comments

Related recommendations:

A brief discussion on html escaping and preventing javascript injection attacks Methods

The above is the detailed content of JavaScript implements getting remote html to the current page. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template