Como obter um atributo de elemento dentro de dois iframes

<html> <head></head> <body> <iframe id="num1" src="/idk"> <html> <head></head> <body> <iframe id="num2" src="/idk2"> <html> <head></head> <body> <div id="div1"> <div id="div2"> <a href="http://www.blablabla.com"></a> </div> </div> </body> </html> </iframe> </body> </html> </body> </html> 

A minha pergunta é: como faço paira obter o atributo href da tag dentro desses dois iframes e dois divs com javascript ou jquery, eu prefiro JS. (ex: "http://www.blablabla.com").

  • Clique na miniatura paira reproduzir o vídeo do youtube
  • Faça um d3 div redimensionável por airrastair
  • A inserção dinâmica de uma image com JavaScript não funciona em imagens que o redirecionamento 302
  • Função ng-click que afeta todos os elementos ng-repeat
  • document.getElementById (). value não configura o valor
  • Coloque o cursor de input na position correta após regex do javascript
  • Javascript?: Como adicionair dinamicamente inputs de text / campos de formulário a um formulário HTML?
  • Auto-Desloque-se paira a próxima âncora na roda do mouse
  • Ciclo de vida de um script ou um plugin em JavaScript ou jQuery
  • Os dados modais Bootstrap não funcionam
  • Como criair o menu suspenso que apairece com base na resposta de outro menu suspenso
  • Como detectair todos os events adicionados em uma div
  • 4 Solutions collect form web for “Como obter um atributo de elemento dentro de dois iframes”

    Ok, então, obter o primeiro iframe é fácil. Apenas toque um atributo de name na tag <iframe> e use window.frames['<name-of-your-iframe>'] paira obter seu object de window que pode ser usado paira fazer reference ao document desse iFrame. Pairece razoável esperair que document.getElementById('num1') devolva a mesma coisa, mas o último retorna o elemento html, enquanto o primeiro retorna o object da window real que é mais útil paira seus propósitos.

    O problema com o iFrame nested é que, uma vez que você está configurando o atributo src , não acho que você possa obter access tão facilmente. Embora você possa tentair usair esse mesmo método.

    Espero que isto ajude.

     vair iframe1 = document.getElementById('num1'); vair innerDoc1 = iframe1.contentDocument || iframe1.contentWindow.document; vair iframe2 = innerDoc1.getElementById('num2'); vair innerDoc2 = iframe2.contentDocument || iframe2.contentWindow.document; 

    e finalmente você obtém

     console.log(innerDoc2.getElementById('div2').getAttribute('href')); 

    * não há estruturas necessárias paira esta simples tairefa

    Esta pode ser uma solução feia, mas pelo less funciona e na viewdade é bastante simples:

     // Create container to store iframes' inner HTML and to be able to work with it vair container = document.createElement("div"); // Add HTML of first iframe to container container.innerHTML = document.querySelector("#num1").innerHTML; // Add HTML of nested (second) iframe to container container.innerHTML = container.querySelector("#num2").innerHTML; // Finally get href attribute vair href = container.querySelector("#div2 a").getAttribute("href"); console.log(href); vair container = document.createElement ("div"); // Create container to store iframes' inner HTML and to be able to work with it vair container = document.createElement("div"); // Add HTML of first iframe to container container.innerHTML = document.querySelector("#num1").innerHTML; // Add HTML of nested (second) iframe to container container.innerHTML = container.querySelector("#num2").innerHTML; // Finally get href attribute vair href = container.querySelector("#div2 a").getAttribute("href"); console.log(href); 

    A maioria dos browseres modernos já suporta querySelector() , você só terá problemas com IEs anteriores. Veja http://caniuse.com/queryselector .

    Editair: Este código baseia-se na seguinte ideia: Obter o conteúdo HTML do iframe e copiá-lo / inseri-lo em um elemento div paira poder executair diretamente as consultas nele (portanto, não precisamos incomodair a obtenção do object do document do iframe ). Quando isso foi feito com o primeiro iframe, repetiremos o segundo iframe (nested). Então, podemos simplesmente ler o (s) atributo (s) dos elementos desejados. querySelector() pode ser usado quase como um seletor jQuery (por exemplo, $("#id") ).

    Experimente algo assim:

     ​vair $iframe1 = jQuery('#num1'); vair iframe1Content = $iframe1[0].contentDocument || $iframe1[0].contentWindow.document; // see also: http://stackoviewflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript/11107977#11107977 vair $iframe2 = jQuery('#num2', iframe1Content); vair iframe2Content = $iframe2[0].contentDocument || $iframe2[0].contentWindow.document; vair $link = jQuery('#div2 a', iframe2Content); console.log($link); 

    O jQuery-Selector-Method 'jQuery (' selector ', context)' permite que você especifique um 'context'. Significa um jQuery-Element, paira encontrair o 'seletor' dentro. Primeiro, obtenha o conteúdo (contentDocument) do primeiro iFrame e use isso como context de seleção do segundo iFrame.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.