Quiero que home.html se cargue en <div id="contenido">
.
<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 el plug-in. ¿Cómo puedo hacer que funcione en Google Chrome?
Por fin he encontrado la respuesta a mi problema. La solución es
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Puede utilizar la función de carga de 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 el on click en lugar de on load.
Aprovechamiento de la 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();
}
según sus restricciones debe utilizar ajax y asegurarse de que su javascript se carga antes del marcado que llama a la función load_home()
.
[Demostración de JSFIDDLE]()