What is the modern alternative to framesets?

Navigation
17

I know that the frame that used to load a few pages into one is no longer used, on the internet there is a lot of content saying that this is obsolete.

But what would be the ideal alternative for this purpose? Load a page in a given size and other pages 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.

    
asked by anonymous 08.05.2014 / 06:46

4 answers

21

O iframe :

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

With iframe , normal HTML can be used on the page, at the same time as iframe placed in body . iframes can be styled 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 the JavaScript is turned off. Even with the sandbox attribute, you can even block JS on pages loaded within 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
    defines some security restrictions.
  • seamless = indicates that the iframe should be rendered pretending to be part of the page
  • width = Width in CSS Pixels
  • height = Height in CSS Pixels
  • In addition, iframe supports global HTML attributes, such as id , class etc.

See more in the W3C documentation .

    
08.05.2014 / 14:25
15

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 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, in addition to multimedia content (such as video, Java applets, ActiveX, PDF, and Flash), you can include another page within your HTML.

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

Already in the mozilla documentation says:

  

The HTML% 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 into your HTML. I tested the object tag to load one page into another and it worked fine in Safari.

Anyway, I recommend using object suggested by @Bacco .

obs: both use iframe , see: link

    
08.05.2014 / 07:34
12

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

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

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

View in JSFiddle

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

View the documentation

    
08.05.2014 / 13:22
6

Example with PHP

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

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

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

Within the index.php , you can place require_once anywhere on the page, even in meta-tags p>

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 conteudo.php

In it we'll put what will appear on the previous page we created. ( the 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.php page, it will display the content inside conteudo.php .

This is undoubtedly the best alternative, I just use it on my websites.

Note: The browser does not read PHP files locally (ie on your computer). If you open in the browser do not think that 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:

In order for you to see your normal page, it will either need to be hosted on a server, or you can install a WAMP so you can run PHP on computer. I recommend XAMPP , without question is the best. You can even install some CMS's on your computer such as: wordpress, joomla, drupal, etc.

    
12.05.2014 / 02:43
What is HTTP response splitting? What are the implications of not declaring variables in PHP?