← Desenvolvimento

[ajuda] carregar URL numa iframe

Lida 3723 vezes

Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Boas!

Pretendo criar um página que simule um browser. Ou seja, contém um campo onde inserimos o URL e ao clicar em "Load URL", o site aparece numa iframe.

Já procurei e o melhor que encontrei foi o seguinte código mas que não funciona...

Alguém sabe como dar a volta a isto?

Código: [Seleccione]
<html>
<head>
<style>
#showUrl {
height:90%;
width:100%;
}
#url {
width:30em;
}
</style>
<script>
function loadUrl() {
var url = document.getElementById( 'url' ).value;
var showUrl = document.getElementById( 'showUrl' );
showUrl.src = url;
}
</script>
</head>
<body>
<form>
Enter URL to load: <input type="text" id="url" />
<input type="button" value="Load URL" onclick="loadUrl()" />
</form>
<iframe id="showUrl"></iframe>
</body>
</html>
Offline
d

diogoosorio 
Membro
Mensagens 134 Gostos 1
Feedback +1

Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Código: (html4strict) [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>
<title>Teste</title>
<style>
#novaFrame {
margin: 0 auto;
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript">
function changeContent(){
// Buscar os valores que interessam à DOM
var orig = document.getElementById("clique");
var url = document.getElementById("url").value;

// Criar uma nova frame
var frame = document.createElement("iframe");

// Atribuir as características à nova frame
frame.setAttribute("src",url);
frame.setAttribute("id","novaFrame");

// Substituir o conteúdo da div "clique"
orig.innerHTML = "";
orig.appendChild(frame);
}
</script>
</head>
<body>
<div id="clique">
<input type="text" name="url" id="url" /><br />
<input type="button" value="Carregar" onClick="changeContent();" />
</div>
</body>
</html>
Está ai. O código cria uma nova frame e substitui o conteúdo da div clique com a iframe.

Se a ideia for carregar a frame numa outra localização (e não substituir o formulário), deixo uma pequena variação:

Código: (html4strict) [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>
<title>Teste</title>
<style>
#novaFrame {
margin: 0 auto;
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript">
function changeContent(){
// Buscar os valores que interessam à DOM
var url = document.getElementById("url").value;

// Criar uma nova frame
var frame = document.createElement("iframe");

// Atribuir as características à nova frame
frame.setAttribute("src",url);
frame.setAttribute("id","novaFrame");

// Mostrar div "escondida" e adicionar-lhe a frame
var orig = document.getElementById("escondida");
orig.appendChild(frame);
orig.style.display = "block";
}
</script>
</head>
<body>
<div id="clique">
<input type="text" name="url" id="url" /><br />
<input type="button" value="Carregar" onClick="changeContent();" />
</div>

<div id="escondida" style="display: none;"></div>
</body>
</html>
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Diogo, muito obrigado!

A segunda variação era o que eu pretendia.
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Deitei foguetes antes da festa... :D

Na segunda variação, de cada vez que se carrega um URL, o script cria uma nova frame. Será possível substitur a frame actual?
Offline
d

diogoosorio 
Membro
Mensagens 134 Gostos 1
Feedback +1

Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Toma:

Código: (html4strict) [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt">
<head>
<title>Teste</title>
<style>
#novaFrame {
margin: 0 auto;
width: 800px;
height: 600px;
}
</style>
<script type="text/javascript">
function changeContent(){

// Buscar os valores que interessam à DOM
var url = document.getElementById("url").value;

// Criar uma nova frame
var frame = document.createElement("iframe");

// Atribuir as características à nova frame
frame.setAttribute("src",url);
frame.setAttribute("id","novaFrame");

// Mostrar div "escondida" e adicionar-lhe a frame
var orig = document.getElementById("escondida");
                if(orig.style.display == "none"){
                    orig.appendChild(frame);
                    orig.style.display = "block";
                } else {
                    document.getElementById("novaFrame").setAttribute("src",url);
                }
}
</script>
</head>
<body>
<div id="clique">
<input type="text" name="url" id="url" /><br />
<input type="button" value="Carregar" onClick="changeContent();" />
</div>

<div id="escondida" style="display: none;"></div>
</body>
</html>
Testa que eu estou no PC da biblioteca (e nem acesso ao notepad tenho, lol). Mas em princípio funciona.
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

obrigado mais uma vez ;)

Páginas: 1

Posts relacionados

SEO

Redireccionar URL dinámica a URL estática

M
Mikemix

HTML + CSS

Ajuda com IFRAME - ASAP

Cacofb

Desenvolvimento

Carregar o site antes de visualizar

K
Kristey