jQuery / JavaScript: acessando conteúdo de um iframe

StackOverflow https://stackoverflow.com/questions/364952

Pergunta

Gostaria de manipular o HTML dentro de um iframe usando jQuery.

Eu pensei que eu 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, este não parece trabalho. Um pouco de shows de inspeção me que as variáveis ??em frames['nameOfMyIframe'] são undefined a menos que eu esperar um pouco para o iframe para carga. No entanto, quando as cargas iframe as variáveis ??não são acessíveis (eu recebo erros do tipo permission denied).

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

Foi útil?

Solução

Eu acho que você está fazendo está sujeita à mesma origem política . Esta deve ser a razão pela qual você está recebendo permissão Tipo negado erros.

Outras dicas

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

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

Referência 

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

Se o iframe src é de outro domínio você ainda pode fazê-lo. Você precisa ler a página externa em PHP e eco-lo de seu domínio. Como esta:

iframe_page.php 

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>

Em seguida, algo como isto:

display_page.html 

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>

A descrição acima é um exemplo de como editar uma página externa através de um iframe sem o acesso negado etc ...

Eu acho isso maneira mais limpa: 

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

Use 

iframe.contentWindow.document

em vez de 

iframe.contentDocument

Você precisa anexar um evento para manipulador onload de um iframe, e executar os js lá, de modo que você tenha certeza do iframe tem carregamento acabado 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 código acima irá resolver o problema 'ainda-não-carregado', mas no que diz respeito as permissões, se você estiver carregando uma página no iframe que é de um domínio diferente, você não será capaz de acessá-lo devido à restrições de segurança.

Você pode usar window.postMessage para chamar uma função entre a página e seu iframe (domínio cruzado ou não).

Documentação

page.html 

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

Iframe.html 

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

Eu prefiro usar outra variante para acessar. Do pai, você pode ter um acesso a variável em iframe filho. $ é uma variável muito e você pode receber acesso a apenas a sua chamada window.iframe_id.$

Por exemplo, window.view.$('div').hide() - Esconder todos os divs em iframe com id 'view'

Mas, ele não funciona no FF. Para uma melhor compatibilidade que você deve usar

$('#iframe_id')[0].contentWindow.$

Você já tentou o clássico, aguardando a carga para completar usando a função pronta builtin do jQuery? 

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

K

Eu criar um código de exemplo. Agora você pode facilmente compreender a partir de diferentes domínio que você não pode acessar conteúdo de iframe .. Mesmo domínio podemos acessar iframe conteúdo

Eu compartilho o meu código, por favor executar esse código verificar o console. I imprimir src imagem no console. Há quatro iframe, dois iframe vindo do mesmo domínio e outros dois de outro domínio (terceiro) .Você pode ver dois imagem src ( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

e

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

... irstChild)}, conteúdos: function (a) {return m.nodeName (a, "iframe") a.contentDocument ...

), que é proveniente de terceiro iframe festa. 

<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>

Eu acabei aqui à procura de obter o conteúdo de um iframe sem jQuery, então para qualquer pessoa que esteja procurando que, é apenas isso: 

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

Esta solução funciona mesmo que iFrame. Eu criei um script PHP que pode obter todo o conteúdo a partir de outro site, eo mais importante é que você pode facilmente aplicar o seu costume jQuery para que o conteúdo externo. Por favor, consulte o seguinte script que pode obter todo o conteúdo de outro site e, em seguida, você pode aplicar o seu cusom jQuery / 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;
}

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;
}

e 

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

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top