Ich möchte, dass home.html geladen wird <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>

Dies funktioniert gut, wenn ich Firefox verwende. Wenn ich Google Chrome verwende, wird nach einem Plug-In gefragt. Wie kann ich es in Google Chrome zum Laufen bringen?

Ich habe endlich die Antwort auf mein Problem gefunden. Die Lösung ist

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

Sie können die jQuery-Ladefunktion verwenden:

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

Es tut uns leid. Bearbeitet für den Klick statt beim Laden.

API abrufen

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

Basierend auf Ihren Einschränkungen sollten Sie Ajax verwenden und sicherstellen, dass Ihr Javascript vor dem Markup geladen wird, das die load_home()Funktion aufruft

Referenz - Davidwalsh

MDN - Verwenden von Fetch

JSFIDDLE-Demo

HTML auf moderne Javascript-Art abrufen

Dieser Ansatz nutzt moderne Javascript-Funktionen wie async/awaitund die fetchAPI. Es lädt HTML als Text herunter und führt es dann in das innerHTMLContainerelement ein.

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

Das await (await fetch(url)).text()mag etwas knifflig erscheinen, ist aber leicht zu erklären. Es hat zwei asynchrone Schritte und Sie können diese Funktion folgendermaßen umschreiben:

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

Weitere Informationen finden Sie in der Dokumentation zur Abruf-API .

Ich habe das gesehen und fand es ganz gut, also habe ich einige Tests durchgeführt.

Es mag wie ein sauberer Ansatz erscheinen, aber in Bezug auf die Leistung liegt er um 50% zurück, verglichen mit der Zeit, die zum Laden einer Seite mit der jQuery-Ladefunktion oder zur Verwendung des Vanille-Javascript-Ansatzes von XMLHttpRequest benötigt wurde, die sich in etwa ähnelten.

Ich kann mir vorstellen, dass dies daran liegt, dass die Seite unter der Haube genau auf die gleiche Weise abgerufen wird, aber auch ein ganz neues HTMLElement-Objekt erstellt werden muss.

Zusammenfassend schlage ich vor, jQuery zu verwenden. Die Syntax ist so einfach wie möglich zu bedienen und hat einen gut strukturierten Rückruf, den Sie verwenden können. Es ist auch relativ schnell. Der Vanille-Ansatz kann einige Millisekunden schneller sein, aber die Syntax ist verwirrend. Ich würde dies nur in einer Umgebung verwenden, in der ich keinen Zugriff auf jQuery hatte.

Hier ist der Code, den ich zum Testen verwendet habe - er ist ziemlich rudimentär, aber die Zeiten sind über mehrere Versuche hinweg sehr konsistent zurückgekommen, sodass ich jeweils eine Genauigkeit von etwa + - 5 ms angeben würde. Tests wurden in Chrome von meinem eigenen Heimserver ausgeführt:

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

Beim Benutzen

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

Denken Sie dann daran, dass Sie in Chrome nicht lokal "debuggen" können, da XMLHttpRequest nicht geladen werden kann. Dies bedeutet NICHT, dass es nicht funktioniert, sondern nur, dass Sie Ihren Code auf derselben Domain aka testen müssen. Ihr Server

Sie können die jQuery verwenden:

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

Versuchen

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

oder

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

Es gibt dieses Plugin auf Github, das Inhalte in ein Element lädt. Hier ist das Repo

https://github.com/abdi0987/ViaJS

Dies wird normalerweise benötigt, wenn Sie header.php oder eine andere Seite einfügen möchten.

In Java ist es einfach, besonders wenn Sie eine HTML-Seite haben und die PHP-Include-Funktion nicht verwenden möchten, aber Sie sollten überhaupt die PHP-Funktion schreiben und sie als Java-Funktion in das Skript-Tag einfügen.

In diesem Fall sollten Sie es ohne Funktion schreiben, gefolgt vom Namen Just. Skript rage das Funktionswort und starte die Include-Datei header.php Dh konvertiere die PHP-Include-Funktion in die Java-Funktion im Skript-Tag und platziere deinen gesamten Inhalt in der enthaltenen Datei.

Verwenden Sie diesen einfachen Code

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

Wenn sich Ihre HTML-Datei lokal befindet, wählen Sie iframe anstelle des Tags. Tags funktionieren nicht browserübergreifend und werden hauptsächlich für Flash verwendet

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