Is it possible to create HTML frames?

Asked

Viewed 274 times

2

I am on a project, where the front-end layer is totally, TOTALLY separate from the Banck-end. They communicate via ajax via REST.

And in this project, I’d like to break the html, so I don’t get duplicate content. Just as we do in Asp.net (master.pages and usercontrols), java, php, etc. For example creating a top/header and a footer q are always fixed on a template page, and the content of this only loads the content of other pages.

The big problem is that I need to do this using only HTML5 or at most Javascript. As far as my knowledge goes, that’s not very possible. I tried using html iframe, but it’s not very functional.

Does anyone have any idea, or reference to how to solve this?

Thanks in advance.

javascript jquery html html5

  • Some restriction on having, for example, a <Section> or a <article> with a defined ID and you load data with $.ajax and populate it with jquery.html()?

  • There’s no restriction @Brunoaugusto, there’s some reference to how I can do this?

  • The very manual of jQuery.ajax() has examples, although only one of them demonstrates the use of a selector when the request is completed, in done().

  • All right, I’m gonna take a look, and I hope this brings me a solution. The data I’m going to upload with $.ajax can be a piece of html code in a text file, right? For example menu.html

  • 3

    recommend the use of some libraries created for this purpose as the knockoujs Angularjs Backbonejs or Emberjs. They provide two-way bindings between html and backend data by javascript. In one of the tutorials of Knockoutjs he teaches to create a Singlepage Application (which is what I believe you seek)

  • Another thing, you can use Serverside Include and keep changing the visibility of the content, if the site is all static

  • @Caputo, the site is totally dynamic, but it has this total separation. From Java and HTML, it’s not something like jsf or jsp. This has complicated my life. I do not know Angularjs, I will research about and see if you meet me. For now I managed to do via ajax and is supplying my need.

  • @Ericosouza From home I put an example of use with Knockoutjs. It is also with Ajax, as in the example below, but has some features to make it easier to manage content

Show 3 more comments

1 answer

2


In the rough it would be more or less like this, you would adapt according to your design

HTML

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <section id="content">
        <!-- conteúdo das páginas -->
    </section>

</body>
</html>

Javascript

function pagLoad(pag) 
{
    $.ajax({
        url: pag,
        success: function(data){
            $("#content").html(data);
        }
    });
}

Call example:

pagLoad("contato.html");
  • 1

    Thanks for the help man, that there worked right here. As I don’t know much of ajax, I had no idea that it was possible to do this. Vlw

  • show!! any question just put there

  • I did as you recommended, but sometimes the imported content does not seem to be loaded. It has occurred to you?

Browser other questions tagged javascript jquery html html5

You are not signed in. Login or sign up in order to post.