web-dev-qa-db-fra.com

Comment charger une page HTML dans un <div> en utilisant JavaScript?

Je veux que home.html soit chargé dans <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 bien lorsque j'utilise Firefox. Lorsque j'utilise Google Chrome, il me demande un plug-in. Comment puis-je le faire fonctionner dans Google Chrome?

javascripthtmlgoogle-chrome
125
Giliweed

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>';
}
184
Giliweed

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>

Pardon. Edité pour le clic au lieu de sur charge.

59
Aaron Liske

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

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, utilisez ajax et assurez-vous que votre javascript est chargé avant le balisage qui appelle la fonction load_home()

Référence - davidwalsh

MDN - Utilisation de Fetch

Démo de JSFIDDLE

35
Jay Harris

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

Cela peut sembler une approche simple, mais en termes de performances, il est en retard de 50% par rapport au temps nécessaire pour charger une page avec la fonction de chargement jQuery ou en utilisant l’approche javascript Vanilla de XMLHttpRequest, qui étaient à peu près similaires. 

J'imagine que c'est parce que sous le capot, la page est exactement de la même façon, mais elle doit également gérer la construction d'un nouvel objet HTMLElement. 

En résumé, je suggère d'utiliser jQuery. La syntaxe est aussi facile à utiliser que possible et vous permet de la rappeler de manière structurée. C'est aussi relativement rapide. L’approche Vanilla peut être plus rapide de quelques millisecondes, mais la syntaxe est déroutante. Je ne l'utiliserais que dans un environnement où je n'avais pas accès à jQuery.

Voici le code que j'avais l'habitude de tester - il est assez rudimentaire, mais les temps sont revenus très cohérents après plusieurs essais, donc je dirais précis à environ + - 5 ms 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>
16
Sam Redway

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

Cette approche utilise des fonctionnalités Javascript modernes telles que async/await et l'API fetch. Il télécharge le HTML en tant que texte et le transmet ensuite à la innerHTML de votre élément 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 loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("home.html");
}

await (await fetch(url)).text() peut sembler un peu délicat, mais c'est facile à expliquer. Il a 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();
}

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

5
Lucio Paiva

Lors de l'utilisation 

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

Ensuite, rappelez-vous que vous ne pouvez pas "déboguer" en chrome localement, car XMLHttpRequest ne peut pas être chargé - Cela ne signifie PAS que cela ne fonctionne pas, cela signifie simplement que vous devez tester votre code sur le même domaine. votre serveur

5
serup

Vous pouvez utiliser le jQuery: 

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

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>
1
Kamil Kiełczewski

Cela est généralement nécessaire lorsque vous souhaitez inclure header.php ou une page quelconque. 

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

Dans ce cas, vous devriez l'écrire sans fonction, suivie du nom Just. Le script rage la fonction Word et lance l'include header.php I.e convertit la fonction d'inclusion php en fonction Java dans la balise de script et place tout votre contenu dans ce fichier inclus.

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

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

https://github.com/abdi0987/ViaJS

0
Run Grub