Efetuar uso da tag <iFrame> HTML com menu

Front-end
#1

Bom dia. Seguinte. Tenho uma pagina simples onde tem um menu para abrir outras paginas (<a href="....") e pagina esta divida em 2 colunas (com CSS). O que eu preciso é ver se é possível abrir os link´s desse menu (são outras páginas) dentro de uma dessas duas colunas. Li sobre o iFrame, mas não sei se dá para abrir assim. Seria possível? Também li sobre o INCLUDE mas no caso acho (acho!!) precisaria estar on-line. É isso mesmo?
Desde já obrigado.

1 curtida
#2

Sim, é possível, poste seu código aqui para vermos como está.

#3

segue código:
INICIO.HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Inicio - Visitantes</title>
<link type="text/css" rel="stylesheet" href="estilos.css" />
</head>
<body>
<header><!-- usado para cabeçalho unico de paginas ou tb para cabeçalhos de artigos separados -->
<br /><br />
<nav><!-- nav usado geralmente com listas-->
<!--<br /><br />-->
    <ul>
        <li><a href="conexao.html">Login</a></li>
        <li><a href="form-cad.html">Cadastro</a></li>
        <li><a href="consulta.html">Consulta</a></li>
        <li><a href="altera.html">Alteração</a></li>
        <li><a href="manutencao.html">Manutenção</a></li>
    </ul>
</nav><!-- fim nav-->
</header><!-- fim do header-->
<main><!-- usado para definir o conteudo principal de um documento. Pode ser usado com <article>, <aside>, <footer>, <header> ou <nav>. Mas não pode vir dessas tags. -->
<section id="dir">
<article><!-- usado para trazer conteudo independente. Pode ser usado varias vezes dentro de uma entrada -->
<p><strong>&nbsp&nbspTeste</strong> de Uso da tag ARTICLE dentro de uma tag MAIN.<br />&nbsp&nbspLado Direito</p>
<iframe src="conexao.html" name="con"></iframe>
<p><a href="conexao.html" target="con">Abrir conexão aqui</a></p> 
</article><!-- fim article -->
</section>
<section id="esq">
<article>
<p><strong>&nbsp&nbspTeste</strong> de Uso da tag ARTICLE dentro de uma tag MAIN.<br />&nbsp&nbspLado Esquerdo</p>
</div>
</article>
</section>
</main><!-- fim main dir -->
<br /><br />
<footer><!-- usado geralmente para notas finais ou como rodapé unico -->
<br />
<p>DATA DO DIA - AUTOR DO SITE</p>
</footer>
</body>
</html>

O file CONEXAO.HTML

<!doctype html>
<html>
<head>
<title>Acesso - Conexão</title>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<img src="logo.jpg" alt="site" />
<p>Dados de Usuários</p>
<form id="frmAcesso" method="post" action="form-cad.html">
<label for="txtUser">Username:</label>
<br />
<input type="txtUser" >
<br />
<label for="txtPass">Senha:</label>
<br />
<input type="password" name="pass" id="pass" value="" />
<br /><br />
<input id="btConectar" type="submit" value="Conectar" />
<input id="btCancelar" type="reset" value="Limpar" />
</form>
<br />
<br />
<a href="inicio.html"><-- Voltar</a>
</body>
</html>

E O CSS disso tudo:

header{
	width:1350px;
	height:100px;
	float: center;
	background-color:#FFE4E1;
}

nav {
	display: flex;
	justify-content: center;
}

ul {
	padding: 0px;
    margin: 0px;
	/*float: center;
    background-color: #EDEDED;
    list-style: none;
	font-family: Verdana;
	background-color: #D6D6D6;
	color: #6D6D6D;
	border-bottom: 3px solid #EA0000;
	padding: 2px 10px;
	display: inline-block;
	text-decoration: none;
	text-align: center;*/
}

li {
	padding: 0px;
    margin: 0px;
	float: center;
    background-color: #EDEDED;
    list-style: none;
	font-family: Verdana;
	background-color: #D6D6D6;
	color: #6D6D6D;
	border-bottom: 3px solid #EA0000;
	padding: 2px 10px;
	display: inline-block;
	text-decoration: none;
	text-align: center;
}


main {
	width:1350px;
    height:405px;
	float: center;
    margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
    /*background-color:#B8860B;*/
	background-color:#BEBEBE;
}

section dir {
	width:675px;
	height:405px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	float: right;
	background-color:#F1D57B;
	margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
	font-family: Geneva;
	font-size: large;
	text-align: justify;
	color: green;
}

section esq {
	width:675px;
	height:500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	float: left;
	background-color:/*#F1D57B*/#8470FF;
	margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: large;
	text-align: justify;
	color: blue;
}

article {
	width:675px;
	height:405px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	float: right;
	/*background-color:/*#F1D57B#8470FF;*/
	margin-top:0;
    margin-left:auto;
    margin-bottom:0;
    margin-right:auto;
	font-family: Geneva, sans-serif;
	font-size: large;
	text-align: justify;
	color: blue;
}

footer{
	width:1350px;
	height:100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
	float: left;
	background-color:#910;
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-size: large;
	text-align: center;
	color: #099;
}

No caso, tem um menu no cabeçalho, e ainda não consegui fazer clicar no menu e abrir na coluna da direita. O <iFrame> está dentro da coluna e assim também não deu certo.
Obrigado se puder ajudar.

1 curtida
#4

Opa desculpa pela demora, vou fazer um exemplo simples aqui, é bem fácil olha só:

Ao clicar neste link é aberto o site do google dentro do iframe, perceba o uso da propriedade target onde eu coloquei o mesmo nome que foi dado ao meu frame.

> <a href="http://www.google.com" target="meuIframe">Link Text</a> 
> 
> <div><iframe name="meuIframe"></iframe></div>
1 curtida
#5

http://jsfiddle.net/HnXFj/2/ aqui um exemplo demo

1 curtida
#6

OK. Agora foi. Obrigado.