web-dev-qa-db-ja.com

JavaScriptを使用してHTMLページを<div>に読み込む方法を教えてください。

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で機能させるにはどうすればよいですか。

javascripthtmlgoogle-chrome
134
Giliweed

私はついに自分の問題に対する答えを見つけた。解決策は

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
194
Giliweed

JQueryのload関数を使うことができます。

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

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

60
Aaron Liske

フェッチ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を使うべきであり、あなたのjavascriptがload_home()関数を呼び出すマークアップの前にロードされていることを確認するべきです

リファレンス - davidwalsh

MDN - フェッチの使用

JSFIDDLEデモ

40
Jay Harris

私はこれを見ました、そして、それがかなりいいように見えたと思ったので、私はそれでいくつかのテストを実行しました。

これはクリーンなアプローチのように思えるかもしれませんが、パフォーマンスの面では、jQueryロード機能またはXMLHttpRequestのVanilla javascriptアプローチを使用してページをロードするのにかかる時間に比べて50％遅れています。

これは、内部的にはまったく同じ方法でページを取得するだけでなく、まったく新しいHTMLElementオブジェクトの作成も処理する必要があるためです。

まとめると、私はjQueryを使うことを提案します。その構文は可能な限り使いやすく、そしてそれはあなたが使うためにうまく構造化されたコールバックを持っています。それはまた比較的速いです。 Vanillaのアプローチは、気付かれないほど数ミリ秒速くなるかもしれませんが、構文は混乱します。これは、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>
17
Sam Redway

現代のJavascriptの方法でHTMLを取得する

このアプローチはasync/awaitとfetch APIのような最新の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 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();
}

詳細については fetch APIドキュメント を参照してください。

5
Lucio Paiva

使用するとき

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

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

5
serup

あなたはjQueryを使用することができます：

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
4
Anup

やってみる

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

async function load_home() {
  let url = 'https://kamil-kielczewski.github.io/fractals/mandelbulb.html'

  content.innerHTML = await (await fetch(url)).text();
}
<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>
1
Kamil Kiełczewski

これは通常header.phpやその他のページをインクルードしたいときに必要です。

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

この場合、あなたはそれを名前Justが続く機能なしでそれを書くべきです。スクリプトWordで関数Wordをインクルードし、include header.phpを起動します。phpインクルード関数をscriptタグでJava関数に変換し、すべてのコンテンツをそのインクルードファイルに配置します。

0
Creative87
$("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
Krishna pattar

コンテンツを要素にロードするgithub上のこのプラグインがあります。こちらがレポです。

https://github.com/abdi0987/ViaJS

0
Run Grub