>  기사  >  웹 프론트엔드  >  원격 HTML을 현재 페이지로 가져오기 위한 JavaScript 구현을 위한 샘플 코드 공유

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

黄舟
黄舟원래의
2017-03-27 14:21:541768검색

오늘 프로젝트를 진행 중인데 현재 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(&#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

사용법은 매우 간단합니다. 댓글 안읽으신 분들을 위해 간략한 설명 부탁드려요

js 코드는 현재 페이지에 로딩되거나 js 파일로 만들어지면, 원격코드는 자동으로 p에 쓰여집니다. 현재 페이지에 ID 번호가 포함됩니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.