web-dev-qa-db-fra.com

Javascript Iframe innerHTML

Est-ce que quelqu'un sait comment obtenir le code HTML d'un IFRAME? J'ai essayé plusieurs méthodes différentes:

document.getElementById('iframe01').contentDocument.body.innerHTML
document.frames['iframe01'].document.body.innerHTML
document.getElementById('iframe01').contentWindow.document.body.innerHTML

etc

javascriptiframeinnerhtml
18
Ubervan

Je pense que c'est ce que vous voulez:

window.frames['iframe01'].document.body.innerHTML

MODIFIER:

Je suis d’avis que cela ne fonctionnera pas dans Chrome et Firefox, bien que cela fonctionne parfaitement dans IE, c’est là que je l’ai testé. Rétrospectivement, c'était une grosse erreur

Cela fonctionnera:

window.frames[0].document.body.innerHTML

Je comprends que ce n’est pas exactement ce qui a été demandé, mais je ne veux pas supprimer la réponse car je pense qu’elle a sa place. 

J'aime la réponse jquery de @ ravz ci-dessous.

15
wcm

Avoir quelque chose comme ce qui suit fonctionnerait.

<iframe id = "testframe" onload = populateIframe(this.id);></iframe>

// The following function should be inside a script tag

function populateIframe(id) { 

    var text = "This is a Test"
var iframe = document.getElementById(id); 

var doc; 

if(iframe.contentDocument) { 
    doc = iframe.contentDocument; 
} else {
    doc = iframe.contentWindow.document; 
}

doc.body.innerHTML = text; 

  }
11
cypher

Si vous regardez JQuery , vous pouvez faire quelque chose comme:

<iframe id="my_iframe" ...></iframe>

$('#my_iframe').contents().find('html').html();

Cela suppose que vos parents et vos enfants d'iframe résident sur le même serveur, en raison de la Même politique d'origine en Javascript.

8
ConroyP

La réponse de Conroy était juste. Dans le cas où vous n’auriez besoin que de la balise body, utilisez simplement: 

$('#my_iframe').contents().find('body').html();
5
ravi404

N'oubliez pas que vous ne pouvez pas traverser des domaines pour des raisons de sécurité.

Donc si c'est le cas, vous devriez utiliser JSON .

2
Biri

Vous pouvez utiliser la propriété contentDocument ou contentWindow à cette fin. Voici l exemple de code. 

function gethtml()
{
var x=document.getElementById("myframe");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
alert(y.body.innerHTML);
}

ici, mon cadre est l'identifiant de votre iframe. Remarque: Vous ne pouvez pas extraire le contenu d'une iframe d'un src situé en dehors de votre domaine. 

2
Sourabh
document.getElementById('iframe01').outerHTML
1
user1175106

Vous pouvez obtenir le code source d'un autre domaine si vous installez le filtre ForceCORS sur Firefox. Lorsque vous activez ce filtre, il contournera la fonctionnalité de sécurité du navigateur et votre script fonctionnera même si vous essayez de lire une autre page Web. Par exemple, vous pouvez ouvrir FoxNews.com dans un iframe, puis en lire le code source. Les navigateurs Web modernes refusent cette possibilité par défaut, car si l'autre domaine contient un élément JavaScript, que vous lisez et affichez-le sur votre page, il pourrait contenir du code malveillant et constituer une menace pour la sécurité. Ainsi, chaque fois que vous affichez des données d'un autre domaine sur votre page, vous devez vous méfier de cette menace réelle et mettre en œuvre un moyen de filtrer tout le code JavaScript de votre texte avant de l'afficher. N'oubliez pas que lorsqu'un morceau de texte brut supposé contient du code contenu dans des balises de script, il ne s'affichera pas lorsque vous l'afficherez sur votre page, mais il s'exécutera! Alors, réalisez que c'est une menace.

http://www-jo.se/f.pfleger/forcecors

1
Zsolt

Cette solution fonctionne comme iFrame. J'ai créé un script PHP pouvant extraire tout le contenu de l'autre site Web. Le plus important est que vous pouvez facilement appliquer votre jQuery personnalisé à ce contenu externe. Veuillez vous reporter au script suivant pour obtenir tous les contenus de l’autre site Web, puis vous pourrez également appliquer votre cusom jQuery/JS. Ce contenu peut être utilisé n'importe où, à l'intérieur de tout élément ou de toute 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\").hide();

  </script>";

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

  //Return customized HTML
  return $html;
}
0
Ahsan Horani