What is the modern alternative to framesets?

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

But what would be the ideal alternative to this goal? Load a page in a given size and other pages right next to it on 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.

 19
htmlhtml5
Author: Darlei Fernando Zillmer, 2014-05-08
Source

4 answers

Or iframe:

You can use the" prime " 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 on 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 turned off. Even with the sandbox attribute, you can even block JS on pages loaded inside 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 for target
  • sandbox = allow-same-origin, allow-top-navigation, allow-forms, allow-scripts
    sets some security restrictions.
  • seamless = indicates that the iframe should be rendered by appearing to be part of the page
  • width = Width in CSS Pixels
  • height = Height in CSS Pixels
  • in addition to these, iframe supports global HTML attributes, such as id, class etc.

See more in the W3C documentation .

 25
Author: Bacco, 2017-04-13 12:59:39

In addition to the solutions already presented by @ Bacco and @ Andrey , it 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 object 

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

As it says in w3schools :

You can also use the tag to embed another webpage into your HTML document.

Translating, plus multimedia content (like video, Java applets, ActiveX, PDF, and Flash), you can include another page within your HTML.

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

Already in the mozilla documentation 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.

Given this, you can use the object tag to load a page in your HTML. I tested the object tag to load one page inside another and it worked fine in Safari.

Anyway, I recommend using iframe suggested by @Bacco.

note: both use JQuery, See: http://api.jquery.com

 15
Author: Paulo, 2014-05-11 22:46:46

An alternative is to use jQuery's load() Method to download a file and "paste" its contents into a div.

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

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

See on JSFiddle

Replace / with the address of the HTML you want to "paste" there.

see the documentation

 12
Author: , 2014-06-01 18:30:54

Example with PHP

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

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

First , create your page in PHP. Ex: index.php

Inside the index.php , you can place the require_once anywhere on the page, even in the 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 file content.php

Inside it we will put what will appear on the previous page that 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 index page.php , will show the content within content.php .

This is undoubtedly the best alternative, I only use it like this on my sites.

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

For you to see your normal page, you will need these files to be hosted on a server, or you can install a WAMP so you can run PHP on your computer. I recommend the XAMPP, without a doubt it is the best. You can even install on your computer some CMS's like: wordpress, joomla, drupal, etc..

 5
Author: Alexandre Lopes, 2014-05-12 00:43:23