Je veux que home.html se charge <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>

Cela fonctionne très bien lorsque j'utilise Firefox. Lorsque j'utilise Google Chrome, il demande un plug-in. Comment le faire fonctionner dans Google Chrome?

J'ai enfin trouvé la réponse à mon problème. La solution est

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

Vous pouvez utiliser la fonction de chargement 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>

Désolé. Édité pour le clic au lieu du chargement.

Récupérer l'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();
}

en fonction de vos contraintes, vous devez utiliser ajax et vous assurer que votre javascript est chargé avant le balisage qui appelle la load_home()fonction

Référence - Davidwalsh

MDN - Utilisation de Fetch

Démo JSFIDDLE

Récupérer du HTML à la manière Javascript moderne

Cette approche utilise des fonctionnalités Javascript modernes telles async/awaitque l' fetchAPI. Il télécharge le HTML sous forme de texte, puis le transmet à l' innerHTMLélément de votre conteneur.

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

Le await (await fetch(url)).text()peut sembler un peu compliqué, mais il est facile d'expliquer. Il comporte deux étapes asynchrones et vous pouvez réécrire cette fonction comme ceci:

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

Consultez la documentation de l'API fetch pour plus de détails.

J'ai vu cela et j'ai trouvé que ça avait l'air plutôt sympa, alors j'ai fait quelques tests dessus.

Cela peut sembler une approche propre, mais en termes de performances, elle est en retard de 50% par rapport au temps qu'il a fallu pour charger une page avec la fonction de chargement jQuery ou en utilisant l'approche javascript vanille de XMLHttpRequest qui étaient à peu près similaires les unes aux autres.

J'imagine que c'est parce que sous le capot, il obtient la page exactement de la même manière, mais il doit également gérer la construction d'un tout nouvel objet HTMLElement.

En résumé, je suggère d'utiliser jQuery. La syntaxe est à peu près aussi facile à utiliser que possible et elle comporte un rappel bien structuré que vous pouvez utiliser. C'est aussi relativement rapide. L'approche vanille peut être plus rapide de quelques millisecondes imperceptibles, mais la syntaxe est déroutante. Je n'utiliserais cela que dans un environnement où je n'avais pas accès à jQuery.

Voici le code que j'ai utilisé pour tester - il est assez rudimentaire mais les temps sont revenus très cohérents sur plusieurs essais, donc je dirais précis à environ + - 5ms dans chaque cas. Les tests ont été exécutés dans Chrome à partir de mon propre serveur domestique:

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

Lors de l'utilisation

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

Ensuite, rappelez-vous que vous ne pouvez pas "déboguer" dans Chrome localement, car XMLHttpRequest ne peut pas se charger - Cela ne signifie PAS que cela ne fonctionne pas, cela signifie simplement que vous devez tester votre code sur le même domaine aka. votre serveur

Vous pouvez utiliser le jQuery:

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

essayer

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

ou

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

Il y a ce plugin sur github qui charge le contenu dans un élément. Voici le repo

https://github.com/abdi0987/ViaJS

Ceci est généralement nécessaire lorsque vous souhaitez inclure header.php ou n'importe quelle page.

En Java, c'est facile, surtout si vous avez une page HTML et que vous ne voulez pas utiliser la fonction php include, mais vous devez absolument écrire la fonction php et l'ajouter en tant que fonction Java dans la balise de script.

Dans ce cas, vous devez l'écrire sans fonction suivie du nom Just. Script fait rage le mot de fonction et lance l'inclusion header.php Ie convertit la fonction d'inclusion de php en fonction Java dans la balise de script et place tout votre contenu dans ce fichier inclus.

Utilisez ce code simple

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

Si votre fichier html réside localement, optez pour l'iframe au lieu de la balise. les balises ne fonctionnent pas sur plusieurs navigateurs et sont principalement utilisées pour Flash

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