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

Funziona bene quando uso Firefox. Quando utilizzo Google Chrome, mi chiede il plug-in. Come faccio a farlo funzionare in Google Chrome?

Alla fine ho trovato la risposta al mio problema. La soluzione è

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

È possibile utilizzare la funzione di caricamento 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>

Scusate. Modificato per il clic sul clic anziché sul caricamento.

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

in base ai tuoi vincoli dovresti usare ajax e assicurarti che il tuo javascript sia caricato prima del markup che chiama la load_home()funzione

Riferimento - davidwalsh

MDN - Utilizzo di Fetch

Demo JSFIDDLE

Recupero HTML nel moderno modo Javascript

Questo approccio utilizza le moderne funzionalità Javascript come async/awaite l' fetchAPI. Scarica HTML come testo e quindi lo inserisce innerHTMLnell'elemento container.

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

L' await (await fetch(url)).text()può sembrare un po 'complicato, ma è facile da spiegare. Ha due passaggi asincroni e puoi riscrivere questa funzione in questo modo:

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

Consulta la documentazione dell'API di recupero per maggiori dettagli.

Ho visto questo e ho pensato che fosse abbastanza carino, quindi ho eseguito alcuni test su di esso.

Può sembrare un approccio pulito, ma in termini di prestazioni è in ritardo del 50% rispetto al tempo impiegato per caricare una pagina con la funzione di caricamento jQuery o usando l'approccio javascript vanilla di XMLHttpRequest che erano approssimativamente simili tra loro.

Immagino che ciò avvenga perché, sotto il cofano, ottiene la pagina nello stesso identico modo, ma deve anche occuparsi della costruzione di un oggetto HTMLElement completamente nuovo.

In sintesi, suggerisco di usare jQuery. La sintassi è più semplice da usare che può essere e ha una richiamata ben strutturata da usare. È anche relativamente veloce. L'approccio alla vaniglia può essere più veloce di alcuni millisecondi impercettibili, ma la sintassi è confusa. Lo userei solo in un ambiente in cui non avevo accesso a jQuery.

Ecco il codice che ho usato per testare - è abbastanza rudimentale ma i tempi sono tornati molto coerenti tra più tentativi, quindi direi preciso a circa + - 5ms in ogni caso. I test sono stati eseguiti in Chrome dal mio server di casa:

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

Quando si usa

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

Quindi ricorda che non puoi "eseguire il debug" in Chrome localmente, perché XMLHttpRequest non può caricare - Ciò NON significa che non funzioni, significa solo che devi testare il tuo codice sullo stesso dominio aka. il tuo server

Puoi usare jQuery:

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

provare

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

o

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

C'è questo plugin su github che carica il contenuto in un elemento. Ecco il repository

https://github.com/abdi0987/ViaJS

Questo di solito è necessario quando vuoi includere header.php o qualunque altra pagina.

In Java è facile soprattutto se hai una pagina HTML e non vuoi usare la funzione include di php, ma dovresti scrivere la funzione php e aggiungerla come funzione Java nel tag script.

In questo caso dovresti scriverlo senza funzione seguito dal nome Just. Lo script infuria la parola funzione e avvia il include header.php Vale a dire convertire la funzione include php in funzione Java nel tag script e posizionare tutto il contenuto in quel file incluso.

Usa questo semplice codice

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

Se il tuo file html risiede localmente, scegli iframe invece del tag. i tag non funzionano su più browser e vengono utilizzati principalmente per Flash

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