Estou trabalhando com uma pagina HTML 100% offline, faço uso do frameset para criação de um menu lateral que seja redimensionável pelo usuário. Fui informado que frameset ou iframe são ultrapassados, então gostaria de saber algum elemento mais atualizado.
2 Respostas
frameset
está obsoleto e não é suportado pelo HTML5, mas iframe
ainda não e é muito usado (veja artigo, em inglês). Inclusive ganhou novos atributos no HTML5.
Já que você quer uma coisa moderna, sugiro usar jQuery UI resizable. Com esta biblioteca você poderá criar uma coluna lateral redimensionável com facilidade, além de poder aproveitar inúmeras utilidades do jQuery.
Veja um exemplo de uma página menu lateral e redimensionável usando jQuery e CSS. Usei iframe
apenas na área onde serão carregadas as páginas (conteúdo):
$("#menu").resizable({
handles: "e", // irá redimensionar apenas para a esquerda
minWidth: 200, // largura mínima do menu
maxWidth: 500, // largura máxima
resize: function( event, ui ){
$("#conteudo").css("width",(window.innerWidth-ui.size.width-60)+"px"); // ajusto a largura do iframe de acordo com a largura do menu
}
});
html, body{
overflow: hidden;
margin: 0;
}
#menu{
min-width: 200px;
height: calc(100vh - 30px); /* altura da tela menos o padding*/
padding: 15px;
overflow-x: hidden; /* escondo a rolagem horizontal*/
float: left;
}
#conteudo{
width: calc(100% - 260px); /* largura da tela menos a largura total do menu*/
padding: 15px;
overflow: auto;
float: left;
}
.ui-resizable-e { /*largura da área onde o mouse redimensiona a largura do menu*/
width: 15px;
background: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="menu">
<h2>Menu</h2>
<a target="conteudo" href="h2.html">Página 2</a>
</div>
<iframe frameborder="0" name="conteudo" id="conteudo" src="h1.html"></iframe>
Para usar o jQuery UI, basta carregar as bibliotecas na página principal:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Veja neste link um exemplo melhor porque o snippet daqui não funciona corretamente o uso dos recursos, e aproveite para analisar o código-fonte.
-
funcionou perfeitamente, porém surgiu o problema que eu queria evitar, ao utilizar iframes ou frames o chrome define seu conteudo como #document, a parte do original. assim por exemplo, não consigo fazer com que um botão no menu, afete um <p> do arquivo, pois document (js) só serve para o mesmo documento. Não é possível usar o contentDocument pois se trata de um arquivo local, o que o jquery não permite, emitindo o erro "cross-origin", como proceder?– Raptador27/02/2018 às 19:51
-
Vc quer que um elemento do menu altere outro elemento de uma página que foi carregada no iframe?– Meu ovo27/02/2018 às 20:00
-
-
O problema é só no Chrome que não aceita protocolo file:// no Ajax, já o Firefox aceita. Em servidor online irá aceitar sem problemas. Se vc rodar em um servidor local, acho que o Chrome irá aceitar porque o protocolo já não é file://– Meu ovo27/02/2018 às 20:38
-
@Raptador Acho que você poderia abrir um outra pergunta sobre a questão de CORS (se já não tiver outra aqui no SOpt). A dúvida da sua pergunta era uma forma mais moderna de substituir os frameset. Sobre manipular elementos de um conteúdo carregado de forma dinâmica ou a forma carregá-los já não está no escopo da pergunta.– Meu ovo27/02/2018 às 23:53
Um dos motivos da queda do iframe é segurança.
Essa página é estática ou dinâmica?
Se for estática, existem inúmeros scripts (shell scripts) que são especializados em montar páginas estáticas (até mesmo um blog inteiro) a partir de arquivos locais. Eles tem uma linguagem de template para informar o que é barra lateral, barra superior, rodapé, conteúdo ... e fazem o trabalho árduo de gerar uma ou mais páginas estáticas , cada uma com o mesmo layout.
Aqui tem uma lista desse tipo de scripts: https://www.netlify.com/blog/2016/05/02/top-ten-static-website-generators/
Se for dinâmica, é o mesmo caso, mas é possível fazer isso com a própria linguagem do lado do servidor. Mas aí teremos um oceano de possibilidades. Você faria o seu próprio? ou seria no formato de um blog (podendo usar WordPress, Joomla...), ou poderia ser convertido em um plugin de um gerenciador de conteúdo dos que citei... infinitos meios de alcançar o mesmo resultado.
A mais simplista de todas, tomando o PHP como exemplo, seria remover seus <iframe>
e trocar por <?php include('barra_lateral.php') ?>
, e assim por diante. Sua página agora seria um script/página PHP, e desde que você consiga fazer o layout em HTML (poderia usar Bootstrap CSS para isso https://getbootstrap.com ) bastaria colocar os include
nos lugares corretos.
Espero ter ajudado.
:root {
--jumbotron-padding-y: 3rem;
}
.jumbotron {
padding-top: var(--jumbotron-padding-y);
padding-bottom: var(--jumbotron-padding-y);
margin-bottom: 0;
background-color: #fff;
}
@media (min-width: 768px) {
.jumbotron {
padding-top: calc(var(--jumbotron-padding-y) * 2);
padding-bottom: calc(var(--jumbotron-padding-y) * 2);
}
}
.jumbotron p:last-child {
margin-bottom: 0;
}
.jumbotron-heading {
font-weight: 300;
}
.jumbotron .container {
max-width: 40rem;
}
footer {
padding-top: 3rem;
padding-bottom: 3rem;
}
footer p {
margin-bottom: .25rem;
}
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
<script src="https://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong> php include('barra_superior.html')</pre></strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1 class="jumbotron-heading">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
<p>New to Bootstrap? <a href="../../">Visit the homepage</a> or read our <a href="../../getting-started/">getting started guide</a>.</p>
</div>
</footer>
Onde você lê php include('barra_superior.html')
é onde se faz o template com PHP: mas eu omiti o código completo, qu seria: <?php include('barra_superior.html') ?>
.
Isso é o melhor que posso fazer no momento para mostrar como fazer um template simples com PHP e HTML + Bootstrap CSS .
-
Eis um dos problemas, sou leigo em php, se vc tiver ao menos um codígo php que separe uma pagina em duas (preferencialmente html locais) e que eu posso escrever toda a pagina em HTML livremente agradeço!– Raptador27/02/2018 às 19:22
-
Ops, eu acho que não tinha visto seu comentário afirmando que vai precisar rodar isso num servidor...– monovox27/02/2018 às 19:28