원격 HTML을 현재 페이지로 가져오기 위한 JavaScript 구현을 위한 샘플 코드 공유

오늘 프로젝트를 진행 중인데 현재 HTML 페이지에서 원격 HTML 페이지를 참조해야 합니다. Baidu에서 검색한 결과 매우 유용한 코드를 발견하여 여기에 공유하겠습니다. 필요에 따라 살펴보세요

html code

<p id="includeHtml"></p>

javascriptcode

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 파일로 만들어지면, 원격코드는 자동으로 p에 쓰여집니다. 현재 페이지에 ID 번호가 포함됩니다.

위 내용은 원격 HTML을 현재 페이지로 가져오기 위한 JavaScript 구현을 위한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!