En HTML puedes utilizar link
e importar archivos. Seguramente ya lo usas con archivos de CSS para añadir estilos a tu página, pero lo puedes usar también para importar otras páginas HTML.
Este método te va a permitir usar las funciones JS de la otra página directamente (los script
se ejecutan en el momento del import
), y para acceder a las variables de la página importada vas a necesitar un par de líneas (mover la página importada a una variable, buscar los elementos en esa variable en lugar de en el propio DOM). Nada complicado.
Entonces, para importar una página en otra, sólo tendrías que hacer esto:
<link rel="import" href="./pagina-importada.html" />
Si la página importada tiene funciones JS, las puedes llamar directamente, y para leer las variables sería algo como esto:
// importar página a una variable
var contenido = document.querySelector("selector-para-tag-link-import").import;
// seleccionar el elemento en la página importada
var el = contenido.querySelector("selector-del-elemento-deseado-en-pagina-importada");
Una cosa importante a tener en cuenta: los import
pueden no estar soportados por todos los navegadores, y se rigen por las reglas CORS, es decir, deben tener el mismo origen o permitir que la página sea importada por página de otros orígenes.
Aquí te dejo un ejemplo:
pagina1.html
<!doctype html>
<html>
<head>
<title>Página 1</title>
<script>
function miFuncion() {
console.log(1);
}
function leeAux() {
// cargamos el contenido de la página importada en una variable
var contenido = document.getElementById("pagina-secundaria").import;
// buscamos el elemento que queramos
var el = contenido.querySelector("#aux");
// ya podemos operar con el elemento con normalidad
console.log(el.innerHTML);
}
</script>
<link rel="import" href="./page2.html" id="pagina-secundaria" />
</head>
<body>
Página 1
<script>
// llamada a una función propia
miFuncion();
// llamada a una función de la página importada
miFuncion2();
// llamada a una función propia que lee elementos de la página importada
leeAux();
</script>
</body>
</html>
pagina2.html
<!doctype html>
<html>
<head>
<title>Página 2</title>
<script>
function miFuncion2() {
console.log(2);
}
</script>
</head>
<body>
<div id="aux">
Página 2
</div>
</body>
</html>