JavaScript: Abrindo um arquivo dentro de um iframe

Este post tem a participação da Clara Verena Battesini.

Vamos mostrar como abrir um arquivo dentro de um iframe, através de um clique de um botão (input type=”button”) ou de um link (a href=””).

O código é bem simples e de fácil entendimento.

Para que um arquivo seja carregado dentro de um iframe é necessário atribuir um valor ao atributo src. O exemplo abaixo mostra como fazer isso através do evento onclick.

getElementById

Neste link você tem uma lista dos elementos que possui o atributo src e podem ser manipulados.

<script type="text/javascript">
  function abrirPdf(){
    document.getElementById("id_do_iframe").src = "nome_do_arquivo.pdf"; 
  }
</script> 
<a href="#" onclick="abrirPdf();return false;">Abrir</a> | 
<input type="button" onclick="abrirPdf()" value="Abrir" />
<br />
<iframe id="id_do_iframe" scrolling="auto" src="" width="600" height="600"></iframe>