ホームページ >ウェブフロントエンド >jsチュートリアル >リモート HTML を現在のページに取得するための JavaScript 実装のサンプル コード共有

リモート HTML を現在のページに取得するための JavaScript 実装のサンプル コード共有

黄舟
黄舟オリジナル
2017-03-27 14:21:541789ブラウズ

今日、私はプロジェクトに取り組んでおり、現在の HTML ページでリモート HTML ページを参照する必要があります。Baidu で検索した結果、非常に便利なコードを見つけました。同じニーズを持つ友人にここで共有します。見てみることができます

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(&#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 ファイルに作成されると、リモート コードが現在のページの includehtml という ID 番号で p に自動的に書き込まれます。

以上がリモート HTML を現在のページに取得するための JavaScript 実装のサンプル コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。