19

Sei que o frame que costumava carregar algumas páginas em uma só não se utiliza mais, na internet há um vasto conteúdo dizendo que isso é obsoleto.

Mas qual seria a alternativa ideal para esse objetivo? Carregar uma página em um tamanho determinado e outras paginas logo ao lado na mesma pagina principal?

Código obsoleto?

<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>

Gostaria de exemplos.

4 Respostas 4

26

O iframe:

Você pode usar o "primo" do <frame>, o <iframe>, que além de suportado pelo HTML5, ganhou alguns novos atributos.

Com o iframe, HTML normal pode ser usado na página, ao mesmo tempo que os iframe colocado no body. iframes podem ser estilizados com CSS para se posicionar e ocupar o tamanho desejado, se comportando como qualquer elemento de bloco.

Assim você pode misturar conteúdo externo com a pagina até mesmo se o JavaScript estiver desligado. Inclusive, com o atributo sandbox, pode até bloquear o JS nas páginas carregadas dentro do 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>

Atributos do iframe em HTML5:

  • src = URL a ser carregado
  • srcdoc = Conteúdo HTML
  • name = contexto usado para target
  • sandbox = allow-same-origin, allow-top-navigation, allow-forms, allow-scripts
    define algumas restrições de segurança.
  • seamless = indica que o iframe deve ser renderizado aparentando ser parte da página
  • width = Largura em CSS Pixels
  • height = Altura em CSS Pixels
  • Além desses, o iframe suporta os atributos globais do HTML, como id, class etc.

Veja mais na documentação do W3C.

15

Além das soluções já apresentadas por @Bacco e @Andrey, pode ser feito com Ajax e object:

Através de Ajax

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

Explicando, você faz uma requisição a uma URL e retorna o conteúdo em uma div.

Através de object

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

Como diz no w3schools:

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

Traduzindo, além de conteúdo multimidia (como video, Java applets, ActiveX, PDF, e Flash), você pode incluir outra página dentro do seu HTML.

Obs: como @Bacco bem informou, a w3schools não é uma fonte confiável e pode haver informações inconsistentes.

Já na documentação da mozilla diz:

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.

Visto isso, você pode utilizar a tag object para carregar uma página no seu HTML. Eu testei a tag object para carregar uma página dentro de outra e funcionou bem no Safari.

De qualquer forma, recomendo utilizar iframe sugerido pelo @Bacco.

obs: ambos utilizam JQuery, veja em: http://api.jquery.com

2
  • 2
    Acho que "única" é uma palavra um tanto forte para o caso. Commented 8/05/2014 às 12:46
  • @Renan você tem razão, inclusive adicionei mais uma solução.
    – Paulo
    Commented 9/05/2014 às 2:31
12

Uma alternativa é usar o método load() do jQuery para baixar um arquivo e "colar" seu conteúdo em uma div.

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

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

Veja no JSFiddle

Substitua / pelo endereço do HTML que quer "colar" ali.

Veja a documentação

5

Exemplo com PHP

Esse exemplo é ótimo, além de ser muito fácil de implementar em seu site, é de fácil manutenção. iframes forçam muito o servidor.

Você terá que criar sua página em PHP, pois irá utilizar o comando require_once.

Primeiramente, crie sua página em PHP. Ex: index.php

Dentro do index.php, você poderá colocar o require_once em qualquer lugar da página, até mesmo nas 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>

Agora vamos criar o arquivo conteudo.php

Dentro dele vamos colocar o que irá aparecer na página anterior que criamos. (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>

Agora, quando você acessar a página index.php, irá mostrar o conteúdo dentro de conteudo.php.

Essa sem dúvidas é a melhor alternativa, eu só uso assim em meus sites.

Obs: O navegador não lê arquivos PHP localmente (ou seja no seu computador). Se você abrir no navegador no pense que se o código não funcionou porque está quebrado, pois o código está certo. O problema é que o navegador não roda PHP localmente. Veja abaixo:

Para que você possa ver a sua página normal, será necessário que esses arquivos sejam hospedados em um servidor, ou você poderá instalar um WAMP para que possa rodar PHP no computador. Recomendo o XAMPP, sem dúvidas é o melhor. Você poderá até instalar no seu computador alguns CMS's como: wordpress, joomla, drupal, etc..

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .