Como alterar a fonte do Iframe em JavaScript?

Como Alterar A Fonte Do Iframe Em Javascript



Ao criar uma página da web ou o site, há um requisito para redirecionar o usuário final para uma página da web diferente para acessar o relevante/pesquisado “ contente ”. Além disso, fornecer diversas funcionalidades ao usuário ao mesmo tempo, viabilizando assim a acessibilidade. Nesses casos, alterar a origem do iframe em JavaScript faz maravilhas ao fornecer ao usuário facilidade em termos de tempo e aborrecimento.

Este blog explicará como alterar a origem do iframe em JavaScript.

O que é um Quadro Inline?

Um ' quadro em linha ” é usado para conter outro documento especificado dentro do documento atual. Isso resulta na troca de páginas da Web com base nos links indicados.





Como alterar a fonte do Iframe em JavaScript?

A origem do Iframe pode ser alterada em JavaScript usando as seguintes abordagens junto com o “ getElementById() ” método:



  • “ Parâmetro aprovado ” Técnica.
  • “ índice selecionado ' Propriedade.

Abordagem 1: alterar a origem do Iframe em JavaScript usando a técnica de parâmetro passado

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



Exemplo
Vamos seguir o exemplo abaixo indicado:



< Centro >< h2 > Alterar a origem do iframe dentro JavaScript h2 >
< ID do iframe = 'página da Internet' origem = 'https://linuxhint.com/detect-tab-key-javascript/' largura = '1000' altura = '550' moldura = '0' rolagem = 'Não' > iframe >
< br >< br >
< botão ao clicar = 'changeIframe('https://linuxhint.com/category/linux-commands/')' > Clique para exibir a página de comandos do Linux botão >
< br > br >
Centro >

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

  • Especifique o link indicado no “ ” juntamente com as dimensões ajustadas.
  • Além disso, crie um botão com um “ ao clicar ” redirecionando para a função changeIframe() tendo o link especificado como parâmetro.
  • Isso resultará no direcionamento da página para o link indicado após o clique do botão.

Vamos continuar com a parte JavaScript do código:



< tipo de script = 'texto/javascript' >
função changeIframe ( mudança ) {
documento. getElementById ( 'página da Internet' ) . origem = mudança ;
}
roteiro >

No trecho de código acima:

  • Declare uma função chamada “ changeIframe() ”.
  • Em sua definição, acesse o link especificado na seção “ quadro em linha ” elemento usando o “ document.getElementById() ” método.
  • Depois disso, aplique o “ origem ” e alocar o link indicado na função acesso ao link acessado usando o parâmetro “ mudança ”.
  • Isso resultará na troca de páginas em relação aos links especificados ao clicar no botão.

Resultado

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

Abordagem 2: alterar a origem do Iframe em JavaScript usando a propriedade selectedIndex

O ' índice selecionado ” 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 na lista suspensa.

Exemplo
Observemos o seguinte exemplo:

< Centro >< corpo >
< ID do iframe = 'página da Internet' origem = 'https://linuxhint.com/detect-tab-key-javascript/' largura = '1000' altura = '550' moldura = '0' rolagem = 'Não' > iframe >
< br >< br >
< selecione id = 'ligações' >
< valor da opção = 'https://linuxhint.com/auto-refresh-web-page-every-5-seconds-javascript/' > Mudar para Artigo 1
< valor da opção = 'https://linuxhint.com/convert-array-to-object-javascript/' > Mudar para Artigo dois
selecionar >
< br >< br >
< botão onClick = 'alterarIframe();' > Mudar Iframe Src botão >
< br >< br >
corpo > Centro >

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

  • Lembre-se da etapa para especificar o link declarado dentro do “