6

La idea es que si tengo dos páginas en HTML las pueda unir, y pueda llamar a sus métodos y al DOM entre ambas páginas, sin utilizar un controlador como PHP

Ejemplo:

pagina1.html

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
    <script>
       function FuncionPagina1(){
          return "mundo";
       }
    </script>
</head>
<body>
    <h1 id="mundo" class="mundoClass">MUNDO!!!</h1>    
</body>
</html>

pagina2.html

<!DOCTYPE html>
<html>
<head>
    <title>Ejemplo</title>
    <script>
       function FuncionPagina1(){
          return "hola";
       }
    </script>
</head>
<body>
    <h1 id="hola" class="holaClass">Hola</h1>    
</body>
</html>

¿Cómo puedo unir pagina1 y pagina2, y poder llamar con acceso simple a ellas como si se tratase de estar en la misma página¿ Con esto me refiero a que si estoy parado en la pagina1, pueda llamar al id="mundo" o class="mundoClass" y viceversa, que de pagina2 pueda llamar a sus propios id y class, y si fuera posible incluso a sus funciones de JavaScript.

Nota: Cabe señalar que la idea es que sea sin iframe

10
  • ¿Las dos páginas abiertas al mismo tiempo? ¿Sólo una? ¿Puede una abrir la otra en una nueva pestaña/ventana?
    – Alvaro Montoro
    Commented el 27 abr. 2017 a las 12:57
  • Nono. En php por ejemplo puedes colocar include() y es como si pagina1 añadiera a pagina2 y pudiera llamar a todos sus metodos y variables. Consultaba algo así en html. Agradezco tu interés! Commented el 27 abr. 2017 a las 13:00
  • 1
    Creo que se hizo una pregunta muy parecida hace unos días y tenía varias respuestas. No sé si la has visto, voy a ver si la encuentro y te pongo un enlace.
    – Alvaro Montoro
    Commented el 27 abr. 2017 a las 13:05
  • la generé yo mismo, pero por mi mala explicación la cerraron. Así que preferí eliminarla y redactarla mejor Commented el 27 abr. 2017 a las 13:05
  • 3
    José: Es muy bueno que hagas el esfuerzo por mejorar tus preguntas. Cuando te cierran una pregunta, es posible reabrirla. En muchos casos lo mejor es hacer el intento por queda el historial del esfuerzo que has realizado. En el caso de esta pregunta y otras tantas falta que el OP mencione lo que ha buscado/intentado. De todas formas te dejé una respuesta. Nota: Las preguntas que se eliminan quedan disponibles a usuarios que tienen cierto nivel de reputación.
    – Rubén
    Commented el 27 abr. 2017 a las 13:29

3 respuestas 3

8

Es perfectamente posible utilizando load de jQuery, solo debes tener cuidado de no incluir la página 1 dentro de la página 2 que a su vez contenga la página 1, sería un ciclo infinito y la verdad no sé cómo se comporte. En fin, regresando al tema:

<div id="pagina2"></div>

<script>
    $("#pagina2").load("/pagina2.html");
</script>

Incluso puedes ser más específico y definir qué sección de la página quieres cargar:

<script>
    $("#pagina2").load("/pagina2.html body");
</script>

y definir alguna acción para cuando la carga del documento termine:

<script>
    $("#pagina2").load("/pagina2.html form", function(){
        $("#inputDePagina2").focus();
    });
</script>
4
  • Y en caso de que pagina1 quisiera acceder al DOOM posteriormente al load? y puedo acceder a las funciones de javascript de la pagina2? Agradezco tu respuesta! Commented el 27 abr. 2017 a las 13:56
  • 1
    Precisamente en el último ejemplo te dejo el cómo puedes ejecutar acciones después del load y si incluyes por ejemplo el body y dentro de éste tienes los scripts de la página 2, no vas a tener problemas para invocarlos. Revisa la página de referencia que te dejé :D Commented el 27 abr. 2017 a las 13:58
  • Voy a revisar y te comento :D Commented el 27 abr. 2017 a las 14:05
  • Tanto Kroneaux Schneider como @Alvaro Montoro tienen una respuesta correcta. Sin embargo por tema de compatibilidad con los navegadores, jquery seria una respuesta que abarca mejor. Agradezco sus respuestas! +1 a ambos ;) Commented el 27 abr. 2017 a las 14:47
7

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>
2
  • Revisaré y te comento :D Commented el 27 abr. 2017 a las 14:06
  • Tanto @Kroneaux Schneider como Alvaro Montoro tienen una respuesta correcta. Sin embargo por tema de compatibilidad con los navegadores, jquery seria una respuesta que abarca mejor. Agradezco sus respuestas! +1 a ambos ;) Commented el 27 abr. 2017 a las 14:47
1

No se debe tomar todo el texto y adjuntarlo porque hay etiquetas que deben usarse una única vez por página, en su lugar, toma el contenido por partes.

Lo primero es usar Fetch API en la página en la que quieres jalar los recursos externos, en este caso una página HTML.

El método fetch() toma un argumento obligatorio, la ruta de acceso al recurso que desea recuperar. Devuelve una Promise que resuelve en Response a esa petición, sea o no correcta. También puede pasar opcionalmente un objeto de opciones init como segundo argumento (ver Request).

Aunque lo anterior es posible, no lo considero una "buena práctica universal". En cuanto a las funciones, en ciertos casos lo mejor que ponerlas en un archivo, es decir crear una librería, y cargar este en cada página que se requieran las funciones que contiene.

En cuanto a las etiquetas HTML en ciertos casos lo ideal es poner la estructura en una página y mediante clases y/o JavaScript manejar la lógica de, es decir controlar, cuándo se deben mostrar.

Bibliografía

2
  • La verdad es que entiendo lo que mencionas. Pero que de pagina1 puedas obtener los tag de pagina2, es la consulta que hago. Se tambien que es mejor ponerlo en un archivo, sin embargo hay veces que creo pequeñas funciones que la dejo en la pagina por otros motivos de dinamizar las paginas Commented el 27 abr. 2017 a las 13:36
  • Agregué el enlace a Fetch API
    – Rubén
    Commented el 27 abr. 2017 a las 13:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.