JavaScript는 원격 HTML을 현재 페이지로 가져오는 것을 구현합니다.

오늘 프로젝트를 진행하고 있는데 현재 HTML 페이지에서 원격 HTML 페이지를 참조해야 하는데 Baidu에서 검색한 결과 매우 유용한 코드를 발견하여 같은 요구 사항을 가진 친구들과 공유하겠습니다. 보세요

html 코드

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

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('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

코드는 매우 간단합니다. 댓글을 읽지 않는 분들을 위해 여기에 간단한 설명이 있습니다.

관련 권장사항:

HTML 이스케이프 및 자바스크립트 주입 공격을 방지하는 방법에 대한 간략한 토론

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