Quiero que home.html se cargue <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>

Esto funciona bien cuando uso Firefox. Cuando uso Google Chrome, me pide un complemento. ¿Cómo lo hago funcionar en Google Chrome?

Finalmente encontré la respuesta a mi problema. La solucion es

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

Puede usar la función de carga 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>

Lo siento. Editado para hacer clic en lugar de cargar.

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

basado en sus restricciones, debe usar ajax y asegurarse de que su javascript esté cargado antes del marcado que llama a la load_home()función

Referencia - davidwalsh

MDN - Utilizando Fetch

Demo de JSFIDDLE

Obteniendo HTML a la manera moderna de Javascript

Este enfoque hace uso de características modernas de Javascript como async/awaity la fetchAPI. Descarga HTML como texto y luego lo alimenta al innerHTMLelemento del contenedor.

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

El await (await fetch(url)).text()puede parecer un poco complicado, pero es fácil de explicar. Tiene dos pasos asincrónicos y podría reescribir esa función de esta manera:

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

Consulte la documentación de la API de recuperación para obtener más detalles.

Vi esto y pensé que se veía bastante bien, así que realicé algunas pruebas.

Puede parecer un enfoque limpio, pero en términos de rendimiento, está retrasado en un 50% en comparación con el tiempo que tardó en cargar una página con la función de carga jQuery o usando el enfoque de JavaScript de vainilla de XMLHttpRequest, que eran más o menos similares entre sí.

Me imagino que esto se debe a que debajo del capó obtiene la página exactamente de la misma manera, pero también tiene que lidiar con la construcción de un nuevo objeto HTMLElement.

En resumen, sugiero usar jQuery. La sintaxis es tan fácil de usar como puede ser y tiene una devolución de llamada bien estructurada para su uso. También es relativamente rápido. El enfoque de vainilla puede ser más rápido en unos pocos milisegundos, pero la sintaxis es confusa. Solo usaría esto en un entorno donde no tuviera acceso a jQuery.

Aquí está el código que solía probar: es bastante rudimentario, pero los tiempos volvieron muy consistentes en múltiples intentos, por lo que diría que son precisos a alrededor de + - 5 ms en cada caso. Las pruebas se ejecutaron en Chrome desde mi propio servidor doméstico:

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

Cuando usas

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

Luego recuerde que no puede "depurar" en Chrome localmente, porque XMLHttpRequest no se puede cargar. Esto NO significa que no funcione, solo significa que necesita probar su código en el mismo dominio también conocido. su servidor

Puedes usar jQuery:

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

tratar

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

Existe este complemento en github que carga contenido en un elemento. Aquí está el repositorio

https://github.com/abdi0987/ViaJS

Esto generalmente se necesita cuando desea incluir header.php o cualquier página.

En Java es fácil, especialmente si tiene una página HTML y no desea usar la función de inclusión de php, pero en absoluto debe escribir la función de php y agregarla como función de Java en la etiqueta del script.

En este caso, debe escribirlo sin función seguido del nombre Just. La secuencia de comandos utiliza la palabra de función e inicia el encabezado include.php Es decir, convierte la función de inclusión php en función Java en la etiqueta del script y coloca todo el contenido en ese archivo incluido.

Usa este código 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 su archivo html reside localmente, busque iframe en lugar de la etiqueta. Las etiquetas no funcionan entre navegadores, y se utilizan principalmente para Flash

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