Javascript Definir Iframe Src

Michael Zippo

A tag HTML iframe incorpora um documento da web em uma página da web. Um documento incorporado pode ser um PDF, uma página da Web ou algum outro recurso. O atributo src define a localização do recurso integrado.

Você pode incorporar o conteúdo de um documento da Web , como um PDF ou um mapa do Google Maps, em outra página, usando HTML.

É aqui que entra o HTML </em>. HTML <em>O < A tag iframe></em> é usada para incorporar objetos externos como outras páginas da web em uma única página da web. Este tutorial explicará, com exemplos, como usar a tag HTML <em><iframe></em> para incorporar recursos da Web em uma página da Web.</p><h2>HTML iframe</h2><p>HTML iframes, ou quadros incorporados, exibem documentos da Web externos em uma página. Você pode incorporar mapas, PDFs, vídeos ou outros recursos usando a tag HTML <iframe> .</p><p>O código armazenado em um quadro embutido é independente do restante de uma página da web. Estilos ou JavaScript que se aplicam à sua página da web não serão aplicados no iframe.</p><p>Aqui está a sintaxe da tag HTML <em><iframe></em>:</p> <p>O <em><iframe A tag ></em> é usada para criar um iframe. Especificamos um atributo iframe <em>src</em>. O atributo contém a posição dos elementos HTML que queremos incorporar em nossa página web. Deve ser um <a href="/url-vs-uri/"> URL HTML </a>.</p><h2>Exemplo de iframe HTML</h2><p>Vamos dar um exemplo para explorar como o A tag <em><iframe></em> funciona.</p> </div> </div> <p>Suponha que você esteja construindo um site para um negócios históricos em Washington, DC. Eles querem que criemos uma página com um vídeo incorporado da Khan Academy sobre o nascimento da Constituição dos Estados Unidos. Esta página é um material recomendado para qualquer pessoa interessada em ingressar na empresa. Podemos usar o seguinte código para incorporar o vídeo em nosso site:</p> <p>Nosso código retorna:</p> </a> </div> < Figura classe = "wp-imagem-bloco"> <img src = "https://lh5.googleusercontent.com/B7_aNtKMRo5xi-n1RJKv6PbF3jGnedSEMOiboyASj-IdPDUErLGbwsrJ3AvdFby6ubXoc VAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf" alt = "B7 ANtKMRo5xi N1RJKv6PbF3jGnedSEMOiboyASj IdPDUErLGbwsrJ3AvdFby6ubXocM93gNVAlCiuoLIFyDI3MYgvAr0Xv3hofcMHDvGPd8ABgVkWruwAY9tH8jjBB47XWanf"> </ figura> <p> usadas um <em><iframe></em> para incorporar um recurso da web externo à nossa página da web. O recurso da web que criamos é o link "<a href="https://www.youtube.com/embed/Rk8dCnKIfP4" target="_blank" rel="noopener"> https://www.youtube.com / incorporar / Rk8dCnKIfP4 </a> ". Isso indica o vídeo que a sociedade histórica deseja exibir em seu site.</p><h4> Altura e largura do iframe HTML </h4> <p>Os atributos height e width são usados para definir o tamanho de um iframe . Suponha que a sociedade histórica local de Washington DC queira que ampliemos o vídeo em seu site.</p><p>Vamos definir a largura do vídeo do YouTube para 500 pixels e a altura para 300 pixels:</p><p>p> <p>Nosso código retorna:</p><figure class = "wp-image-block"> <img src = "https: / / lh4.googleusercontent.com/YBnpQe9nKF00pYzt6ESAsx-siD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp-OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "alt =" YBnpQe9nKF00pYzt6ESAsx SiD25fEYpDnVr9lpQVzrNKBy5R2ozOoQbIpJMVfZS08LTMeKp OTyWrumRMNbT0M0ZmkQrfAKdsXIWkIYJs5d8U3Ih8QRI5u4uYK0CmzTDOT5n0HZ "> </ figure> <p> nosso vídeo incorporado agora é 500px de largura e 300px alta em nosso documento HTML. Isso torna mais fácil para as pessoas visualizarem nosso site</p>no </ figure> <p>site.</p>> Alternativamente, podemos definir o <a href="/css-height-and-width/ "> largura e altura da tag iframe usando CSS </a>. No entanto, como o HTML suporta um atributo de altura e peso, isso não é necessário.</p><h2>Remover borda do iframe HTML</h2><p>Ao trabalhar com <em><iframe></em>, você observe que seu conteúdo é cercado por uma borda. Se você deseja remover essa borda, você pode usar <a href="/css-borders/"> <em>border: none ;</em> </a> <a href="/css-borders/"> Atributo CSS </a>.</p><p>A sociedade histórica nos pediu para remover a borda ao redor do vídeo do YouTube de seu site. Aqui está o código que usaríamos para remover a borda:</p> <p>Nosso código retorna:</p> <rosto class = "wp-image-block"> <img src = "https://lh5.googleusercontent.com/GqIGiI370xPK2xxk-C_lCtJfww6i5MJY_NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF" alt = "C GqIGiI370xPK2xxk LCtJfww6i5MJY NYNSyKQMUmntzGAJX1b8hojU86mDXRKnt3UKFri1tIvxYrtZ6fJojJboymP3a2CjChs3orcV7A4dfqor8MCJdj9qNNy4QOd3X92kSOF"> </ figure> <p> agora o nosso vídeo ele não tem mais uma borda.</p><h2>Destino do link iframe HTML</h2><p>Além disso, você pode usar as tags <em><iframe></em> como o quadro de destino para um link . Podemos definir um iframe como o quadro de destino para um link usando o atributo target em um link HTML. O atributo HTML de destino deve se referir ao atributo name de um <em><iframe></em>.</p><p>Suponha que a sociedade histórica tenha outro vídeo que eles querem que mostremos em seu site no Artigo I do a Constituição dos Estados Unidos. Este vídeo também foi postado pela Khan Academy.</p> </a> </div> <p>Ao clicar no texto <em>Nascimento</em> na página da web, o vídeo <em>Nascimento da Constituição dos Estados - United</em> deve aparecer no iframe. Quando o texto <em>Artigo I</em> for clicado, o vídeo sobre o Artigo I da Constituição deve ser renderizado.</p><p>Poderíamos usar o seguinte código para fazer isso:</p> <p>Nosso código retorna:</p><figure class = "wp -block-image"> <img src = "https: //lh4.googleusercontent.com/RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjj sS4aQYQF7vZDr3_LXitgw2l3uX8Lq6Y2RcT xyYH5BxOkW4Iy OALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2-oJNxlwbz5OLQeqJr "alt ="> </ figura RdKRFkGb8AcQn8T5zIBRCZte8MRcbEjjsS4aQYQF7vZDr3 LXitgw2l3uX8Lq6Y2RcTxyYH5BxOkW4IyOALB2enMO889lpKqXFXewdFTNji1hOCLhn9tbM2 OJNxlwbz5OLQeqJr "> <p> Por padrão, o vídeo sobre o nascimento da Constituição dos Estados Unidos afirmou na iframe. o conteúdo do iframe muda para apontar para o vídeo da Khan Academy sobre o Artigo I da Constituição. Isso acontece quando você clica na URL do <em>Artigo I</em>.</p> </div> <p>Nosso iframe é redirecionado para o vídeo sobre o nascimento da Constituição se este vídeo ainda não estiver presente quando clicarmos em <em>Nascimento</em>.</p><h2>Conclusão</h2><p>A tag HTML <em><iframe></em> incorpora recursos externos da Web, como páginas da Web, em outra página da Web. Isso é útil se você deseja adicionar mapas, arquivos, vídeos ou outras páginas da Web ao seu site.</p><p>Este tutorial explicou, referindo-se a exemplos, como usar HTML <em><iframe></em > para exibir recursos externos da Web em uma página da Web. Agora você tem o conhecimento para começar a usar a tag <em><iframe></em> como um profissional!</p><p>Para saber mais sobre codificação HTML, leia nossa <a href="/learn-html / "> </a> <a href="/learn-html/?> linguagem de marcação de hipertexto do guia de aprendizado </a>.</p>