Como alterar a fonte do iframe em javascript?

Evan Mueller

Ao criar uma página da web ou o site, é necessário redirecionar o usuário final para uma página da web diferente para acessar o relevante/pesquisado “contente”. Além disso, fornecendo várias funcionalidades ao usuário ao mesmo tempo, tornando a acessibilidade viável. Nesse cenário, alterar a fonte do iframe em JavaScript faz maravilhas para fornecer ao usuário facilitar em termos de tempo e aborrecimentos.

Este blog explicará como mudar a fonte do iframe em javascript.

O que é um quadro embutido?

Um "quadro embutido”É usado para conter outro documento especificado no documento atual. Isso resulta na troca das páginas da web com base nos links declarados.

Como alterar a fonte do iframe em javascript?

A fonte do iframe pode ser alterada no JavaScript usando as seguintes abordagens junto com o “getElementById ()”Método:

““Parâmetro passado"Técnica.
““SelectedIndex" Propriedade.

Abordagem 1: Altere a fonte do Iframe em JavaScript usando a técnica de parâmetro passada

Essa técnica pode ser utilizada para mudar para a página especificada, colocando o link da página correspondente como o parâmetro de uma função quando acessado com a ajuda de um botão.

Exemplo
Vamos seguir o exemplo abaixo do momento:

Altere a fonte do iframe em JavaScript

Nas linhas de código acima, execute as seguintes etapas:

Especifique o link declarado no “”Tag junto com as dimensões ajustadas.
Além disso, crie um botão com um anexo “ONCLICK”Evento redirecionando para a função alteração.
Isso resultará na direção da página para o link declarado sobre o botão Clique.

Vamos continuar até a parte JavaScript do Código:

No trecho de código acima:

Declare uma função chamada “mudança de alteração ()”.
Em sua definição, acesse o link especificado no “quadro embutido”Elemento usando o“documento.getElementById ()”Método.
Depois disso, aplique o “src”Atributo e aloce o link declarado sobre o acesso à função ao link acessado usando o parâmetro“mudar”.
Isso resultará na troca das páginas em relação aos links especificados sobre o botão Clique.

Saída

Na saída acima, pode -se observar que as páginas são alteradas ao clicar no botão.

Abordagem 2: Altere a fonte do iframe em javascript usando a propriedade SelectedIndex

O "SelectedIndex”Propriedade retorna o índice da opção selecionada em uma lista suspensa. Esta propriedade pode ser aplicada para redirecionar para o link especificado em relação ao valor da opção selecionada da lista suspensa.

Exemplo
Vamos observar o seguinte exemplo:

Nas linhas de código acima, execute as seguintes etapas:

Lembre -se da etapa para especificar o link declarado no “</strong>”Tag tendo o especificado“<strong>eu ia</strong>”E dimensões ajustadas.</li> <li>Na próxima etapa, inclua o “<strong>Selecione</strong>”Elemento com o especificado“<strong>eu ia</strong>”Para criar uma lista suspensa.</li> <li>Depois disso, conter o “<strong>opção</strong>”Elemento para definir o valor da opção. </li> <li>Especifique os links declarados como o “<strong>valor</strong>”Do elemento de opção.</li> <li>Além disso, crie um botão com um “<strong>ONCLICK</strong>”Evento que invocará a função ChangeIframe ().</li> </ul> <p>Vamos para a parte JavaScript do código:</p> <script type="text/javascript"><br>function changeIframe() <br>var get = document.getElementById("links");<br>var dropDown = get.options[get.selectedIndex].value;<br>document.getElementById("webpage").src= dropDown ;<br><br></script> <p>No trecho de código acima:</p> <ul> <li>Defina uma função chamada “<strong>mudança de alteração ()</strong>”. </li> <li>Em sua definição, acesse o especificado “<strong>Selecione</strong>”Elemento por seu“<strong>eu ia</strong>”Usando o“<strong>documento.getElementById ()</strong>”Método.</li> <li>Na próxima etapa, aplique o “<strong>SelectedIndex</strong>" e a "<strong>valor</strong>”Propriedades para redirecionar para o valor i.e. link contra a opção selecionada correspondente.</li> </ul> <p><strong>Saída</strong></p> <p>Da saída acima, é evidente que as páginas estão mudando corretamente em relação ao “<strong>opções</strong>”Valor no botão Clique.</p> <p>Conclusão</p> <p>O "<strong>getElementById ()</strong>”Método em combinação com a técnica de parâmetro passada ou o“<strong>SelectedIndex</strong>”A propriedade pode ser usada para alterar a fonte do iframe em JavaScript. A técnica anterior pode ser utilizada para redirecionar para o link passado como o parâmetro da função no botão Clique. A última abordagem pode ser implementada para mudar para os links correspondentes em relação à opção selecionada da lista suspensa. Este tutorial explica como alterar a fonte do iframe em JavaScript. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://pt.cyberaxe.org/article/how-to-change-the-page-title-in-javascript">« Como alterar o título da página em JavaScript</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pt.cyberaxe.org/article/how-to-change-discord-notification-sound-on-mobile">Como alterar o som da notificação de discórdia no celular? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/html">html</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-add-and-play-videos-on-a-webpage-using-html">Como adicionar e reproduzir vídeos em uma página da web usando HTML?</a> </div> <div class="white-news__text"> O vídeo pode ser adicionado e reproduzido com a ajuda da tag .... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/tommie-konopelski">Tommie Konopelski</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/how-can-i-list-all-docker-commands">Como posso listar todos os comandos do Docker?</a> </div> <div class="white-news__text"> Para listar todos os comandos do Docker, utilize os comandos Docker, Docker Help ou Docker -Help. El... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/benny-hilll-dds">Benny Hilll DDS</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pt.cyberaxe.org/category/java">Java</a> </div> <div class="white-news__name"> <a href="http://pt.cyberaxe.org/article/what-is-import-java-io--in-java">O que é importar java.io.*; em java?</a> </div> <div class="white-news__text"> Em Java, o “importar java.io.*; é uma declaração de importação que permite que um programa Java use... </div> <div class="white-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/pandas-to-latex">Pandas para látex</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/numpy-save-dict">Numpy Save Dict</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/evan-mueller">Evan Mueller</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/python-stringio">Python Stringio</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/python">Pitão</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/python-count-occurrences-in-list">Ocorrências de contagem de python na lista</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/jackie-blanda">Jackie Blanda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">O Oracle Fusion considerado melhor que o SAP?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-are-volumes-defined-in-docker-compose-yaml">Como os volumes são definidos no Docker compor YAML?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/jackie-blanda">Jackie Blanda</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/salesforce">Força de vendas</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/salesforce-apex---list">Salesforce Apex - Lista</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/carl-hintz-dds">Carl Hintz DDS</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/linux-commands">Comandos Linux</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-install-and-enable-ssh-multi-factor-authentication-for-linux-systems">Como instalar e ativar a autenticação multifatorial SSH para sistemas Linux</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/orlando-green">Orlando Green</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-use-getelementsbytagname-method-in-javascript">Como usar o método getElementsByTagName em JavaScript</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/ed-treutel-iv">Ed Treutel IV</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pt.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://pt.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">Como converter um mapa em uma string em java?</a> </div> <div class="header-news__author"> <a href="http://pt.cyberaxe.org/author/rickey-greenholt">Rickey Greenholt</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Um site sobre o sistema operacional Linux. Aqui você encontrará muitos artigos interessantes e guias úteis</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/python">Pitão</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/postgresql">PostGresql</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/c-sharp">C nítido</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pt.cyberaxe.org/category/oracle-database">Banco de dados Oracle</a></li> </li> <li class="menu-item"><a href="http://pt.cyberaxe.org/all-categories"><b>Todas as categorias</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>