How to join two html pages without using iframe

Navigation
7

The idea is that if I have two HTML pages I can join them, and I can call their methods and the DOM between both pages, without using a controller like PHP

Example:

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>

How can I join pagina1 and pagina2 , and be able to call with simple access to them as if they were on the same page? By this I mean that if I'm standing on the page1 , I can call id="mundo" or class="mundoClass" and vice versa, which page2 can call its own id and class , and if possible even its JavaScript functions.

Note : It should be noted that the idea is to be without iframe

    
asked by José Miguel Sepulveda 27.04.2017 в 14:55
source

3 answers

7

It's perfectly possible using load jQuery , you just have to be careful not to include page 1 inside of page 2 that in turn contains page 1, would be an infinite cycle and I really do not know how to behave. In short, returning to the topic: 

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

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

You can even be more specific and define what section of the page you want to upload: 

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

and define some action for when the loading of the document ends: 

<script>
    $("#pagina2").load("/pagina2.html form", function(){
        $("#inputDePagina2").focus();
    });
</script>
    
answered by 27.04.2017 / 15:45
source
7

In HTML you can use link and import files. Surely you already use it with CSS files to add styles to your page, but you can also use it to import other HTML pages.

This method will allow you to use the JS functions of the other page directly (the script are executed at the time of import ), and to access the variables of the imported page you will need a pair of lines (move the imported page to a variable, look for the elements in that variable instead of in the DOM itself). Nothing complicated.

So, to import one page into another, you just have to do this: 

<link rel="import" href="./pagina-importada.html" />

If the imported page has JS functions, you can call them directly, and to read the variables it would be something like this: 

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

One important thing to keep in mind: the import may not be supported by all browsers, and are governed by the CORS rules, that is, they must have the same origin or allow the page to be imported per page of other origins.

Here is an example:

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>
    
answered by 27.04.2017 в 16:02
1

Do not take all the text and attach it because there are labels that should be used only once per page, instead, take the content in parts.

The first thing is to use Fetch API on the page where you want to pull the external resources , in this case an HTML page.

  

The fetch () method takes a mandatory argument, the path to the resource that you want to retrieve. Returns a Promise that resolves to Response to that request, whether or not it is correct. You can optionally pass an init options object as a second argument (see Request ).

Although the above is possible, I do not consider it a "universal good practice". As for the functions, in some cases the best thing to put them in a file, ie create a library, and load this on each page that requires the functions it contains.

Regarding HTML tags in certain cases, the ideal is to put the structure on a page and through classes and / or JavaScript to handle the logic of, that is, control, when they should be displayed.

Bibliography

answered by 27.04.2017 в 15:15
Private methods in Javascript classes Header error - Warning: Can not modify header information - headers already sent