Saya ingin home.html memuat <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>

Ini berfungsi dengan baik ketika saya menggunakan Firefox. Ketika saya menggunakan Google Chrome, ia meminta plug-in. Bagaimana cara membuatnya bekerja di Google Chrome?

Saya akhirnya menemukan jawaban untuk masalah saya. Solusinya adalah

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

Anda dapat menggunakan fungsi beban 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>

Maaf. Diedit untuk klik pada bukan pada memuat.

Ambil 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);
    });
} 

API XHR

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();
}

berdasarkan kendala Anda, Anda harus menggunakan ajax dan memastikan bahwa javascript Anda dimuat sebelum markup yang memanggil load_home()fungsi

Referensi - davidwalsh

MDN - Menggunakan Fetch

Demo JSFIDDLE

Mengambil HTML dengan cara Javascript modern

Pendekatan ini memanfaatkan fitur Javascript modern seperti async/awaitdan fetchAPI. Ia mengunduh HTML sebagai teks dan kemudian memasukkannya ke innerHTMLelemen wadah Anda.

/**
  * @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");
}

The await (await fetch(url)).text()mungkin tampak sedikit rumit, tapi mudah untuk menjelaskan. Ini memiliki dua langkah asinkron dan Anda bisa menulis ulang fungsi itu seperti ini:

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

Lihat dokumentasi API ambil untuk detail lebih lanjut.

Saya melihat ini dan berpikir itu terlihat cukup bagus jadi saya menjalankan beberapa tes di atasnya.

Ini mungkin tampak seperti pendekatan yang bersih, tetapi dalam hal kinerja itu tertinggal 50% dibandingkan dengan waktu yang dibutuhkan untuk memuat halaman dengan fungsi beban jQuery atau menggunakan pendekatan javascript vanilla XMLHttpRequest yang kira-kira mirip satu sama lain.

Saya membayangkan ini karena di bawah kap ia mendapatkan halaman dengan cara yang sama persis tetapi juga harus berurusan dengan membangun objek HTMLElement yang sama sekali baru juga.

Singkatnya saya sarankan menggunakan jQuery. Sintaksnya mudah digunakan, dan memiliki panggilan balik yang terstruktur dengan baik untuk Anda gunakan. Ini juga relatif cepat. Pendekatan vanilla mungkin lebih cepat dengan beberapa milidetik yang tidak terlalu mencolok, tetapi sintaksisnya membingungkan. Saya hanya akan menggunakan ini di lingkungan di mana saya tidak memiliki akses ke jQuery.

Berikut adalah kode yang saya gunakan untuk menguji - ini cukup sederhana tetapi waktu kembali sangat konsisten di beberapa percobaan jadi saya akan mengatakan tepat sekitar + - 5ms dalam setiap kasus. Pengujian dijalankan di Chrome dari server rumah saya sendiri:

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

Ketika menggunakan

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

Maka ingatlah bahwa Anda tidak dapat "men-debug" di chrome secara lokal, karena XMLHttpRequest tidak dapat memuat - Ini TIDAK berarti bahwa itu tidak berfungsi, itu hanya berarti bahwa Anda perlu menguji kode Anda pada domain yang sama alias. server Anda

Anda dapat menggunakan jQuery:

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

mencoba

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>

$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

atau

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';

Ada plugin ini di github yang memuat konten ke dalam elemen. Ini repo-nya

https://github.com/abdi0987/ViaJS

Ini biasanya diperlukan ketika Anda ingin memasukkan header.php atau halaman apa pun.

Di Jawa itu mudah terutama jika Anda memiliki halaman HTML dan tidak ingin menggunakan fungsi include php tetapi sama sekali Anda harus menulis fungsi php dan menambahkannya sebagai fungsi Java dalam tag skrip.

Dalam hal ini Anda harus menulisnya tanpa fungsi diikuti dengan nama Just. Script mengamuk kata fungsi dan mulai menyertakan header.php Ie mengkonversi fungsi include php ke fungsi Java di tag script dan tempatkan semua konten Anda di file yang disertakan.

Gunakan kode sederhana ini

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

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>

Jika file html Anda berada secara lokal, gunakan iframe alih-alih tag. tag tidak berfungsi lintas browser, dan sebagian besar digunakan untuk Flash

Misalnya: <iframe src="home.html" width="100" height="100"/>