What is the modern alternative to framesets?

Asked

Viewed 9,578 times

19

I know that the frame that used to load some pages in a single one is no longer used, in the internet there is a vast content saying that this is obsolete.

But what would be the ideal alternative to that goal? Load a page in a given size and other pages right next to the same main page?

Obsolete code?

<frameset border="1" cols="25%,*">
    <frame NAME="coluna1" src="pagina.html" RESIZE target="main">
    <frame NAME="coluna2" src="pagina2.php" RESIZE target="content">
    <noframes>
        <body>
        </body>
    </noframes>
</frameset>

I would like examples.

html html5

4 answers

25


The iframe:

You can use the "cousin" of <frame>, the <iframe>, which, in addition to being supported by HTML5, has gained some new attributes.

With the iframe, normal HTML can be used on the page at the same time as the iframe placed in the body. iframes can be stylized with CSS to position and occupy the desired size, behaving like any block element.

So you can mix external content with the page even if Javascript is off. Inclusive, with the attribute sandbox, can even block the JS on the pages loaded inside the iframe.

...
<body>
   <h1>Cabecalho da pagina<h1>
   <p>
      HTML normal pode ser usado na pagina, e o &lt;iframe&gt; colocado
      e estilizado com CSS para posicionar e ocupar o tamanho desejado,
      como qualquer elemento de bloco
   </p>
   <iframe name="coluna1" src="pagina.html" width="300" height="500">
   <iframe name="coluna2" src="pagina2.php" width="300" height="500">
   <p>
      Assim você pode misturar conteudo externo com a pagina ate mesmo se o
      JavaScript estiver desligado.
   </p>
</body>

Attributes of iframe in HTML5:

  • src = URL to be loaded
  • srcdoc = HTML content
  • name = context used to target
  • sandbox = allow-same-origin, allow-top-navigation, allow-forms, allow-scripts
    sets some safety restrictions.
  • seamless = indicates that the iframe should be rendered appearing to be part of the page
  • width = Width in CSS Pixels
  • height = Height in CSS Pixels
  • In addition to these, the iframe supports global HTML attributes such as id, class etc..

See more on W3C documentation.

15

In addition to the solutions already presented by @Bacchus and @Andrey, can be done with Ajax and object:

Through Ajax

$.ajax({
    type: "POST",
    url: "some.php",       
})
.done(function(conteudo) {
    $('#suadiv').html(conteudo)
});

Explaining, you make a request to a URL and return the content in a div.

Through

$("#area").html('<object data="http://www.brasil.gov.br">');

As it says in the w3schools:

You can also use the tag to embed Another webpage into your HTML Document.

Translating, in addition to multimedia content (such as video, Java applets, Activex, PDF, and Flash), you can include another page within your HTML.

Obs: as @Bacchus well informed, w3schools is not a reliable source and there may be inconsistent information.

Already in the documentation of Mozilla says:

The HTML <object> Element (or HTML Embedded Object Element) represents an External Resource, which can be treated as an image, a nested browsing context, or a Resource to be handled by a plugin.

Having said that, you can use the tag object to upload a page to your HTML. I tested the tag object to load one page into another and worked well on Safari.

Anyway, I recommend using iframe suggested by @Bacchus.

Obs: both use both JQuery, see in: http://api.jquery.com

  • 2

    I think "unique" is a rather strong word for the case.

  • @Renan you’re right, I even added another solution.

12

An alternative is to use the method load() from jQuery to download a file and "paste" its contents into a div.

// HTML
<div id="minha_div"></div>

// jQuery
$("#minha_div").load("/");

See on Jsfiddle

Substitute / by the HTML address you want to "paste" there.

View documentation

5

Example with PHP

This example is great, as well as being very easy to implement on your site, it is easy to maintain. iframes force the server a lot.

You will have to create your page in PHP as you will use the command require_once.

First of all, create your PHP page. Ex: index php.

Within the index php., you can put the require_once anywhere on the page, even on meta-tags.

Ex:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="pt-BR" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Aqui irá ficar o título da página</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>
  HTML normal pode ser usado na pagina.
</p>
<!-- puxa o código do arquivo conteudo.php como se fosse um frame/iframe, só que ele renderiza a página como se o código dentro de conteudo.php fosse da própria página -->
<?php
require_once "conteudo.php"
?>
<!-- Você pode adicionar quantos, e onde quizer -->
</body>
</html>

Now let’s create the archive php content.

Inside it we will put what will appear on the previous page we created. (a index.php)

<p>
Isso é um texto, esse mesmo texto irá aparecer na página index.php como se esse texto fosse da própria página.
</p>
<a href="https://google.com"> Isso é um link que vai para o Google </a>

Now, when you access the page index php., will show the contents inside php content..

This is undoubtedly the best alternative, I only use so on my websites.

Obs: The browser does not read PHP files locally (i.e., on your computer). If you open the browser on think that if the code did not work because it is broken, because the code is right. The problem is that browser does not run PHP locally. See below:

In order for you to see your normal page, it will be necessary that these files are guest on a server, or you can install a WAMP so you can run PHP on your computer. I recommend XAMPP, without a doubt is the best. You can even install on your computer some CMS’s like: wordpress, joomla, drupal, etc..

Browser other questions tagged html html5

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