0

Qual maneira um IFRAME ou EMBED pode-ser criado dinamicamente com atributo do HREF clicado naquele dado momento, abrindo-se o objeto com o respectivo URL daquele link no qual foi acionado através do clique do mouse.

Código

<body>
 <a href="http://pt.stackoverflow.com/questions/ask" onclick="abrir(this.href); return false;">Clique</a>
  <hr>
 <span id="exibir"></span>
</body>

<script language="JavaScript">

function abrir(URL) {
obj = document.createElement("embed");
obj.setAttribute("src","'+URL+'");
obj.style.width = 240+"px";
obj.style.height = 180+"px";
document.getElementById('exibir').appendChild(obj);
}
</script>

Resta fazer o script capturar o setAttribute do <a href='http://pt.stackoverflow.com'> passando para o setAttribute("src",""); indexando-o no "src","".

Alguém têm alguma idéia de como conseguir isto?

2 Respostas 2

1

Faça assim:

<a href="http://www.bbc.com/news/" onclick="abrir(this);return false;">Clique</a>
<a href="http://www.abola.pt/" onclick="abrir(this);return false;">Clique</a>
<a href="http://www.usatoday.com/" onclick="abrir(this);return false;">Clique</a>

<script>
    function abrir(ele) {
        var iframe = document.createElement('iframe');
        iframe.src = ele.href;
        iframe.width = 240;
        iframe.height = 180;
        document.body.appendChild(iframe);
    }
</script>

Ou se quiser estar sempre a substiruir:

<a href="http://www.bbc.com/news/" onclick="abrir(this);return false;">Clique</a>
<a href="http://www.abola.pt/" onclick="abrir(this);return false;">Clique</a>
<a href="http://www.usatoday.com/" onclick="abrir(this);return false;">Clique</a>

<script>
    function abrir(ele) {
        var elem = document.getElementById('dinamic_iframe');
        if(elem !== null) { // remover caso exista
            elem.remove();
        }
        var iframe = document.createElement('iframe');
        iframe.src = ele.href;
        iframe.id = 'dinamic_iframe';
        iframe.width = 240;
        iframe.height = 180;
        document.body.appendChild(iframe);
    }
</script>

2
  • 1
    Estava eu dando uma olhada nas perguntas que ja tenho feito aqui SOpt, e notei que não havia dado o merecido Voto nesta tua resposta. Perdoe-me pela distração por não ter votado a tempo atrás quando precisei da resposta. Mas enfim, você me respondeu então mereceu. rsrs Commented 13/08/2017 às 22:19
  • De nada @DiegoHenrique. Obrigado
    – Miguel
    Commented 14/08/2017 às 8:56
0

Ok! @Miguel. Também trago uma outra alternativa de fazer o <iframe/> dinamico carregar o atributo href do link. Me ocorreu na linha de pensamento substituir o atributo src para o atributo name do <iframe/>. Uma pequena troca e veja o resultado disso aqui:

window.onclick=function() {

document.getElementById('exibir').innerHTML='';

obj = document.createElement("iframe");
obj.setAttribute("name","id");
obj.style.width = 240+"px";
obj.style.height = 180+"px";
document.getElementById('exibir').appendChild(obj);
}
<a href="http://bing.com/?cc=br" target="id">bing</a> /
 
<a href="http://br.ask.com" target="id">ask</a> /

<a href="http://br.search.yahoo.com" target="id">yahoo</a> /

<a href="http://google.com.br" target="id">google</a>
<hr>
<span id="exibir"></span>

   

Já para o <embed/> criado também dinamicamente, refiz o script por completo para que funcionasse como esperado. Confira:

function abrir(URL) {
document.getElementById("exibir").innerHTML = "<embed src='"+URL+"' type='application/mplayer' nocache='0' showcontrols='false' autostart='1' width='' height=''/>";
}
<a href="http://cache28.vuclip.com/53/65/5365756905f3dbd79909b3cce52649a3/ba63207/NiceGuys_5365_w_3.3gp" onclick="abrir(this.href); return false;">clic</a>
<hr>
<span id="exibir"></span>

   

Observe que, ambos resultados sofrerão alguma modificação relevante o significante.

No demais para mim foi satisfatório, agora espero que esta dúvida ou função ajude mais alguém.

1
  • Aí vai adicionar quantas vezes clicar. Vai estar sempre a adicionar à página
    – Miguel
    Commented 7/06/2016 às 20:03

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 .