JavaScriptを使用してHTMLページを<div>にロードするにはどうすればよいですか？

161

home.htmlをロードしたい<div id="content">。 

<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
      function load_home(){
            document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
  }
</script>

これは、Firefoxを使用している場合は正常に機能します。Google Chromeを使用すると、プラグインが要求されます。Google Chromeで機能させるにはどうすればよいですか？

javascript  html  google-chrome 
— ギリウィード
ソース
1
そして、次のようにfalseを返すことを忘れないでくださいload_home(); return false
— mplungjan
2
ライブラリなしではそれほど簡単ではありません。iFrameにロードする方がよい場合があります。：この記事をチェックアウトstackoverflow.com/questions/14470135/...
— sgeddes
1
home.htmlはシンプルなWebページです。私はそれに名前を付けました。@jayharris
— Giliweed 2013
そして、あなたはそのページのすべてをコンテンツ要素にロードしようとしているのですか、それとも単にコンテンツ要素にページへのリンクを配置しているのですか？
— adeneo 2013
そのページのすべてをコンテンツ要素にロードしようとしています。質問を編集しました。@adeneo
— Giliweed 2013

回答:

213

ようやく自分の問題に対する答えを見つけました。解決策は

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
— ギリウィード
ソース
3
これはエレガントでクリーンですが、実際にDOM APIを介してオブジェクト要素を作成した方が良いと思います。
— デビッド
3
これは遅く、攻撃するには安全ではありません-以下の私の答えを参照してください（コメントにするには長すぎました）
— Sam Redway '19
1
@DavidMaesあなたは何を提案しますか？サンプルを見せていただけますか？
— Xsmael 2016年
2
これは安全ではないかもしれませんが、単純な「デスクトップ上のフォルダー内のローカル」開発を行っている場合は問題ありません。誰もが銀行のWebサイトを運営しており、クライアントが銀行口座情報を処理し、XSS攻撃を仕掛けているわけではありません。解決策をありがとう、私のニーズのために私は別のルートに行く必要があり、Pythonサーバーを必要とし、外部の動的にロードされたhtmlに通常のJquery load（）関数を使用することになりました。しかし、これは私を私の問題で
— うまく進めるのに役立ちました
1
@KamilKiełczewski type="type/html"は次のように変更されますtype="text/html"
— Shayan
63

jQueryロード関数を使用できます。

<div id="topBar">
    <a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">        
</div>

<script>
$(document).ready( function() {
    $("#load_home").on("click", function() {
        $("#content").load("content.html");
    });
});
</script>

ごめんなさい。ロード時ではなくクリック時用に編集されました。

— アーロン・リスケ
ソース
こんにちは、私はこの方法を使おうとしましたが、機能させることができません。必要に応じて、新しい質問を開くことができます。ありがとう。私のフィドルはここにあります：jsfiddle.net/ekareem/aq9Laaew/288345
— NoChance
52

Fetch API

function load_home (e) {
    (e || window.event).preventDefault();

    fetch("http://www.yoursite.com/home.html" /*, options */)
    .then((response) => response.text())
    .then((html) => {
        document.getElementById("content").innerHTML = html;
    })
    .catch((error) => {
        console.warn(error);
    });
}

XHR API

function load_home (e) {
  (e || window.event).preventDefault();
  var con = document.getElementById('content')
  ,   xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function (e) { 
    if (xhr.readyState == 4 && xhr.status == 200) {
      con.innerHTML = xhr.responseText;
    }
  }

  xhr.open("GET", "http://www.yoursite.com/home.html", true);
  xhr.setRequestHeader('Content-type', 'text/html');
  xhr.send();
}

制約に基づいてajaxを使用し、load_home()関数を呼び出すマークアップの前にJavaScriptがロードされていることを確認してください

リファレンス-davidwalsh

MDN-フェッチの使用

JSFIDDLEデモ

— ジェイ・ハリス
ソース
ありがとう。しかし、私のコードはプロジェクトの一部に関連しています。申し訳ありませんが、プロジェクト作業でiframeを使用するとは思いません。質問を編集しました。@jay harrisをご覧ください
— Giliweed 2013
1
@ジェイ・ハリス：同じ起源の方針についてはどうですか？
— ArunRaj 14
1
@ArunRajあなたはjavascript bc内の別のウェブサイトから来るページをロードすることができませんそれはセキュリティ上の懸念です。しかし、サーバーからスクリプトをロードすることができます。これにより、他のページがロードされ、ajaxを介してJavaScriptにエコーバックされます。
— ジェイハリス
1
リクエストにContent-Typeヘッダーを追加してGETも意味がありsetRequestHeader("Accept", "text/html")ません。
— mindplay.dk
24

最新のJavaScriptによるHTMLの取得

このアプローチではasync/await、fetchAPI などの最新のJavaScript機能を利用します。HTMLをテキストとしてダウンロードしinnerHTML、コンテナー要素のにフィードします。

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text()少しトリッキーに見えるかもしれませんが、それは説明するのは簡単です。2つの非同期ステップがあり、この関数を次のように書き換えることができます。

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

詳細については、フェッチAPIのドキュメントをご覧ください。

— ルシオ・パイバ
ソース
これを使用して問題がある場合は、関数が「window.onload」関数の外部に記述されていることを確認してください。
— 冬のカラ
19

私はこれを見て、見た目がいいと思ったので、いくつかのテストを実行しました。

クリーンなアプローチのように思えるかもしれませんが、jQueryのload関数を使用してページをロードしたり、XMLHttpRequestの基本的なjavascriptアプローチを使用したりする時間と比較すると、パフォーマンスは50％遅れています。

これは内部的にはまったく同じ方法でページを取得するが、まったく新しいHTMLElementオブジェクトの構築にも対応する必要があるためだと思います。

要約すると、jQueryの使用をお勧めします。構文は、可能な限り使いやすく、使いやすいように構造化されたコールバックを備えています。また、比較的高速です。バニラアプローチは、目立たないほど数ミリ秒速くなるかもしれませんが、構文は混乱します。これは、jQueryにアクセスできない環境でのみ使用します。

これは私がテストに使用したコードです-それはかなり初歩的ですが、時間は複数の試行で非常に一貫して戻ってきたので、それぞれの場合で正確に約+-5msと言います。テストは私自身のホームサーバーからChromeで実行されました。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page   = 'testpage.htm';
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>
— サム・レッドウェイ
ソース
1
「正確」ではなく「正確」を意味すると思います。
— pulse0ne
私は何度もそれを実行し、毎回数ミリ秒のスイングしかありませんでした。したがって、指定された時間は+-5msまたはそれに近い精度です。申し訳ありませんが、完全に明確にされていなかったかもしれません。
— Sam Redway、2015
6

使用する場合 

$("#content").load("content.html");

次に、XMLHttpRequestを読み込めないため、Chromeでローカルに「デバッグ」できないことに注意してください。これは、機能しないことを意味するのではなく、同じドメインでコードをテストする必要があることを意味します。あなたのサーバー

— Serup
ソース
5
"jQuery"！= "javascript" || jQuery <javascript || OP.indexOf（ "jQuery"）<1
— KittenCodings
4

jQueryを使用できます。 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
— Anup
ソース
3
答えを説明してください。また、これはOPが質問で言及しなかったjQueryのように見えます。
— デビッド
2
ここでいくつかの答えはjqueryにあります
— Anup
jQueryは、そのようなAjax呼び出しを行うためのかなり標準的なものです。答えは簡潔で適切だと思います。
— Luca
2

試す

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

コードスニペットを表示

— カミル・キエチェフスキー
ソース
1 
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

または 

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
— クリシュナパター
ソース
0

これは通常、header.phpやその他のページを含めるときに必要です。

Javaでは、HTMLページがあり、php include関数を使用したくない場合は特に簡単ですが、php関数を記述してJava関数としてスクリプトタグに追加する必要があります。

この場合、関数なしで記述し、その後にJustという名前を付けます。スクリプトは機能語を怒らせ、インクルードheader.phpを開始します。つまり、phpインクルード機能をスクリプトタグのJava関数に変換し、すべてのコンテンツをそのインクルードファイルに配置します。

— Creative87
ソース
0

この単純なコードを使用する

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```
— キャクスープ
ソース
w3.includeHTML（）は定義されていません
— toing_toing
不思議に思う人のために、w3-include-HTMLはW3Schools.comのW3.JSスクリプトライブラリの一部です（こちらから入手できます：w3schools.com/w3js/default.asp）。私は、W3Schoolsの（とw3.js、およびことを指摘したいw3.includeHTML()）は、W3コンソーシアム（HTML + CSS + DOM規格（WHATWGされている他のグループ）を定義する2つの主要なグループの一つと提携してどのような方法ではありません。
— 大
-4

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>
— ルドルフ・レムシック
ソース
1
質問に対応しない回答で答える。また、質問した人がすでに回答している
— Katler
-5

HTMLファイルがローカルにある場合は、タグの代わりにiframeを使用します。タグはクロスブラウザでは機能せず、主にFlashで使用されます

例： <iframe src="home.html" width="100" height="100"/>

— ジャイナ・アビシェク
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.