Jump to content
André Ciappina

Inserindo Iframes por JavaScript

Recommended Posts

Bom, basicamente: existem vários botões, e quando clicados um iframe específico deste botão é inserido no html.

 

function prepareFrame() {
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("src", linkYoutube);

            /*estilos do iframe*/
    espaco_iframe.html(ifrm);                   /*insere o iframe em forma de html */
}
var espaco_iframe = $('.div_planilhas_youtube')
var linkYoutube = $('.div_planilhas_youtube').data('href');               /*busca no html o data_href específico daquele botão, pra usar como URL do iframe*/

 

$('#tabela_funcoes tr td').click(function() {           /*disparando o função pelo clique*/
    prepareFrame(this);
})

 

O ÚNICO problema está sendo:

Os vídeos abrem com o clique, mas a função continua a usar somente o primeiro data_href correspondente.

Aí o vídeo acaba sendo o mesmo pra todos os botões.

 

Já tentei:
function(this)
this prepareFrame()
prepareFrame() this
prepareFrame(this)

tô começando a ficar desesperado adnodkspnpkasda

Muito obrigado a quem se dispor!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
    • By eduardaarosaa
      Estou tentando fazer um validador de idade, mas meu onclick não está retornando como o esperado. O caminho para o aquivo externo está correto, já testei com um alert.
       
      Meu HTML:
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Verificador de Hora</title>
          <link rel="stylesheet" type="text/css" href="style/style.css">
      </head>
      <body>
          <header>
              <h1>Verificador de Idade</h1>
          </header>
          <section>
              <div>
                  <p>Ano de nascimento:
                      <input type="number" name="txtnumber" id="txtano">
                  </p>
                  <p>
                      Sexo:
                      <input type="radio" name="radiosex" id="masc" checked>
                      <label for="masc">Masculino</label>
                      <input type="radio" name="radiosex" id="fem" >
                      <label for="fem">Feminino</label>
                  </p>
                  <p>
                      <input type="button" value="Verificar" onclick="verificar()">
                  </p>
                 
              </div>
              <div id="res">
                  Preencha os campos e veja o resultado.
              </div>
          </section>
          <footer>
              <p>&copy; Eduarda Rosa</p>
          </footer>
          <script src="script/script.js"></script>
      </body>
      </html>
       
      e o JS: 
       
      function verificar(){
          var data = new Date();
          var ano = data.getFullYear();
          var fano = document.getElementById('txtano');
          var res = document.querySelector('div#res');
          if(fano.Value.length == 0 || fano.value > ano){
              window.alert("Error, verifique os dados e tente novamente!");
          }else{
              window.alert("Ok");
          }
      }
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.