javascript - values - js document iframe

jQuery/JavaScript: acessando o conteúdo de um iframe (10)

Esta solução funciona da mesma forma que o iFrame. Eu criei um script PHP que pode obter todo o conteúdo do outro site, e a parte mais importante é que você pode facilmente aplicar o seu jQuery personalizado a esse conteúdo externo. Por favor, consulte o seguinte script que pode obter todo o conteúdo do outro site e, em seguida, você pode aplicar o seu jQuery cusom / JS também. Este conteúdo pode ser usado em qualquer lugar, dentro de qualquer elemento ou qualquer página.

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

Eu gostaria de manipular o HTML dentro de um iframe usando jQuery.

Eu pensei que seria capaz de fazer isso definindo o contexto da função jQuery para ser o documento do iframe, algo como:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

No entanto, isso não parece funcionar. Um pouco de inspeção me mostra que as variáveis em frames['nameOfMyIframe'] são undefined menos que eu espere um tempo para o iframe carregar. No entanto, quando o iframe é carregado, as variáveis não estão acessíveis (recebo permission denied - erros do tipo).

Alguém sabe de uma solução para isso?

Eu acabei procurando o conteúdo de um iframe sem jquery, então para qualquer um que esteja procurando por isso, é exatamente isso:

document.querySelector('iframe[name=iframename]').contentDocument

Eu acho que o que você está fazendo está sujeito à mesma política de origem . Esse deve ser o motivo pelo qual você está recebendo erros de tipo de permissão negada .

Eu crio um código de amostra. Agora você pode entender facilmente de um domínio diferente que não é possível acessar o conteúdo do iframe. Mesmo domínio, podemos acessar o conteúdo iframe

Eu compartilho meu código, por favor, execute este código verifique o console. Eu imprimo imagem src no console. Existem quatro iframe, dois iframe provenientes do mesmo domínio e outros dois de outro domínio (terceiros). Você pode ver dois imagem src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) no console e também pode ver dois erros de permissão (erro 2: permissão negada para acessar a propriedade 'documento '

... irstChild)}, conteúdo: function (a) {retorno m.nodeName (a, "iframe")? a.contentDocument ...

) que vem de iframe de terceiros.

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

Para ainda mais robustez:

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...

Se o <iframe> é do mesmo domínio, os elementos são facilmente acessíveis como

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Reference

Usar

iframe.contentWindow.document

ao invés de

iframe.contentDocument

Você já tentou o clássico, esperando que a carga seja concluída usando a função integrada do jQuery?

$(document).ready(function() {
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
} );

Você precisa anexar um evento ao manipulador onload de um iframe e executar os js nele, para garantir que o iframe tenha terminado de carregar antes de acessá-lo.

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

O problema acima resolverá o problema "ainda não carregado", mas, no que diz respeito às permissões, se você estiver carregando uma página no iframe de um domínio diferente, não poderá acessá-la devido a restrições de segurança.

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});