jQuery / JavaScript: l'accès à contenu d'un iframe

https://stackoverflow.com/questions/364952

21-08-2019
|

Question

Je voudrais manipuler le HTML à l'intérieur d'un iframe en utilisant jQuery.

Je pensais que je serais capable de le faire en réglant le contexte de la fonction jQuery pour le document de l'iframe, quelque chose comme:

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

Toutefois, cela ne semble pas fonctionner. Un peu d'inspection me montre que les variables sont frames['nameOfMyIframe'] à moins que j'attends undefined un certain temps pour l'iframe pour charger. Cependant, lorsque l'iframe charge les variables ne sont pas accessibles (I get permission denied - erreurs de type).

Quelqu'un sait-il d'un travail autour de cela?

La solution

Je pense que ce que vous faites est soumis à la . Cela devrait être la raison pour laquelle vous obtenez l'autorisation de type refusé des erreurs .

Autres conseils

Si l'est du <iframe> même domaine, les éléments sont facilement accessibles comme

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

Référence

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

Si l'iframe src est d'un autre domaine vous pouvez toujours le faire. Vous devez lire la page externe en PHP et l'écho à partir de votre domaine. Comme ceci:

iframe_page.php

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

    $domain = file_get_contents($URL)

    echo $domain
?>

Alors quelque chose comme ceci:

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>

Ce qui précède est un exemple de la façon de modifier une page externe via un iframe sans accès refusé etc ...

Je trouve cela plus propre chemin:

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

Utilisez

iframe.contentWindow.document

au lieu de

iframe.contentDocument

Vous devez joindre un événement au gestionnaire onload d'un iframe, et d'exécuter les js là-bas, afin de vous assurer que l'iframe a fini de charger avant d'y accéder.

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

Le plus va résoudre le problème « non encore chargé », mais en ce qui concerne les autorisations, si vous chargez une page dans l'iframe qui est d'un autre domaine, vous ne serez pas en mesure d'y accéder en raison de restrictions de sécurité.

Vous pouvez utiliser window.postMessage pour appeler une fonction entre la page et son iframe (domaine croix ou non).

Documentation

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>

Je préfère utiliser autre variante pour accéder. De parent, vous pouvez avoir un accès à variable enfant iframe. Est une variable $ trop et vous pouvez avoir accès à son juste appel window.iframe_id.$

Par exemple, window.view.$('div').hide() - cacher tous les divs en iframe id 'view'

Mais, il ne fonctionne pas dans FF. Pour une meilleure compatibilité, vous devez utiliser

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

Avez-vous essayé le classique, en attendant que la charge de terminer en utilisant la fonction prêt builtin jQuery?

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

Je crée un exemple de code. Maintenant, vous pouvez facilement comprendre de domaine différent vous ne pouvez pas accéder à contenu iframe .. Même domaine que nous pouvons accéder au contenu iframe

Je vous partage mon code, S'il vous plaît exécuter ce code vérifier la console. Imprimer l'image src à la console. Il y a quatre iframe, deux iframe venant de même domaine et deux autres d'autres domaines (tiers) .Vous pouvez voir deux images 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 ) à la console et peut également voir deux erreurs d'autorisation ( 2 Erreur: Autorisation refusée pour accéder à la propriété « document »

... irstChild)}, contenu: fonction (a) {return m.nodeName (a, "iframe") a.contentDocument ...

) qui vient de iframe tiers.

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

J'ai fini par regarder ici pour obtenir le contenu d'un iframe sans jquery, donc pour tous ceux qui cherchent ailleurs pour cela, il est ceci:

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

Cette solution fonctionne même que iFrame. J'ai créé un script PHP qui peut obtenir tout le contenu de l'autre site, et la plus importante est que vous pouvez facilement appliquer votre coutume jQuery pour que le contenu externe. S'il vous plaît se référer au script suivant qui peut obtenir tout le contenu de l'autre site et vous pouvez appliquer votre cusom jQuery / JS ainsi. Ce contenu peut être utilisé partout, à l'intérieur tout élément ou une page.

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

Pour encore plus de robustesse:

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();
  ...
}
...

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow