Salve, pessoal.
Para os apaixonados por controles nativos do HTML, que tal utilizar o IFrame como um mini-browser para navegar em páginas externas no escopo da aplicação? Lembro bem que já publicamos um vídeo sobre o assunto e está disponível na seção Videos > ASP.NET.
Pois é, o exemplo é muito simples e não requer muito esforço para conseguir um resultado satisfatório. Veja um screenshot do resultado do artigo.
Para os apaixonados por controles nativos do HTML, que tal utilizar o IFrame como um mini-browser para navegar em páginas externas no escopo da aplicação? Lembro bem que já publicamos um vídeo sobre o assunto e está disponível na seção Videos > ASP.NET.
Pois é, o exemplo é muito simples e não requer muito esforço para conseguir um resultado satisfatório. Veja um screenshot do resultado do artigo.
Para definir o layout da página, precisamos criar uma estrutura usando alguns DIVs pré-configurados em folhas de estilo (CSS). Vamos direto ao ponto!
Código fonte do arquivo styles.css:
Código fonte do arquivo styles.css:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{padding:5px; text-decoration:none; color:#000000;}
div#header{background-color:#F3F2ED;}
div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#F6F0E0; height: 508px;}
div#navigation ul{margin:15px 0; padding:0; list-style-type:none;}
div#navigation li{margin-bottom:5px;}
div#extra{background:#CCC8B3;}
div#footer{background:#BFBD93;}
div#footer p{margin:0;padding:5px 10px}
div#container{width:900px;margin:0 auto}
div#content{float:right;width:700px}
div#navigation{float:left;width:200px}
div#extra{clear:both;width:100%}Código fonte HTML da página Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Free Css Layout</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="container">
<div id="header"><h1>Usando IFrame em ASP.NET</h1></div>
<div id="wrapper">
<div id="content">
<iframe name="" src="<% =sUrl %>" style="height: 504px; width: 692px"></iframe>
</div>
</div>
<div id="navigation">
<p><strong>Meus Links</strong></p>
<ul>
<li><a href="Default.aspx?url=g1">Globo</a></li>
<li><a href="Default.aspx?url=fsp">Folha de São Paulo</a></li>
<li><a href="Default.aspx?url=tra">Terra</a></li>
<li><a href="Default.aspx?url=uol">UOL</a></li>
<li><a href="Default.aspx?url=inf">Info OnLine</a></li>
</ul>
</div>
<div id="extra">
<p align="center"><a href="http://sites.google.com/site/programacaoonline">Programação On-Line</a></p>
</div>
</div>
</body>
</html>
Para concluir, segue o código em linguagem C# para permitir a navegação das páginas externas.
public partial class _Default : System.Web.UI.Page
{
public string sUrl = "";
protected void Page_Load(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(Request.QueryString["url"]))
this.ValidaUrl(Request.QueryString["url"]);
}
private void ValidaUrl(string p)
{
switch (p)
{
case "g1":
sUrl = "http://www.globo.com";
break;
case "fsp":
sUrl = "http://www.folha.com";
break;
case "tra":
sUrl = "http://www.terra.com";
break;
case "uol":
sUrl = "http://www.uol.com";
break;
case "inf":
sUrl = "http://www.infoexame.com";
break;
}
}
}
Pegue o código fonte no link abaixo:
UsandoIFrame.rar
Até mais!
Nenhum comentário:
Postar um comentário
Deixe aqui seu comentário