web-dev-qa-db-fra.com

Obtenir du code HTML à l'intérieur d'iframe à l'aide de jQuery

Voici ma situation.

J'ai un fichier appelé iframe.html, qui contient le code pour un diaporama d'images . Le code est un peu comme

<html>
  <head>
    <!-- Have added title and js files (jquery, slideshow.js) etc. -->
  </head>

  <body>
    <!-- Contains the images which are rendered as slidehow. -->
    <!-- have hierarchy like 'div' inside 'div' etc. -->
  </body>
</html>

Les utilisateurs peuvent utiliser le code intégré pour ajouter le diaporama à leurs blogs ou sites Web (ils peuvent provenir de différents domaines). Supposons qu'un utilisateur doit incorporer le diaporama dans index.html, il peut l'ajouter en ajoutant les lignes suivantes:

<iframe id="iframe" src="path_to_iframe.html" width="480" height="320" scrolling="no" frameborder="0"></iframe>

Cela portera le code HTML complet de iframe.html à index.html. Il me faut maintenant un moyen d'accéder aux éléments de l'iframe pour ajuster certaines de leurs propriétés.

Comme dans le code, la largeur et la hauteur de l'iframe sont définies par l'utilisateur sur certaines dimensions fixes. Je voudrais ajuster la taille du diaporama (et des images contenues) à la taille du conteneur iframe. Quelle est la meilleure façon de procéder?

J'ai essayé sans succès d'accéder aux composants iframe à partir de index.html par quelque chose comme:

$('#iframe').contents();

mais obtenez l'erreur:

TypeError: Impossible d'appeler la méthode 'contenu' de null

Donc, je pense que pour implémenter la logique dans iframe.html où le diaporama devrait vérifier la largeur et la hauteur du parent et définir sa hauteur en conséquence.

Je suis assez confus, espérons que ma question aura un sens pour la plupart. S'il vous plaît n'hésitez pas à demander des explications supplémentaires. Votre aide est appréciée.

jqueryiframe
41
Ajit S

Cette ligne récupérera l'intégralité du code HTML du cadre. En utilisant d'autres méthodes au lieu de innerHTML, vous pouvez parcourir le DOM du document interne.

document.getElementById('iframe').contentWindow.document.body.innerHTML

Rappelez-vous que cela ne fonctionnera que si la source du cadre se trouve sur le même domaine. S'il s'agit d'un domaine différent, la protection XSS (Cross-Site-Scripting) entrera en vigueur.

53
Knaģis
var iframe = document.getElementById('iframe');
  $(iframe).contents().find("html").html();
6
Dolo
$(editFrame).contents().find("html").html();
4
Arun Yokesh

cela fonctionne pour moi parce que cela fonctionne bien dans ie8.

$('#iframe').contents().find("html").html();

mais si vous aimez utiliser javascript à part pour jquery, vous pouvez utiliser comme ceci

var iframe = document.getElementById('iframecontent');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var val_1 = innerDoc.getElementById('value_1').value;
2
Hermes

Si vous avezDivcomme suit dans unIframe

 <iframe id="ifrmReportViewer" name="ifrmReportViewer" frameborder="0" width="980"

     <div id="EndLetterSequenceNoToShow" runat="server"> 11441551 </div> Or

     <form id="form1" runat="server">        
       <div style="clear: both; width: 998px; margin: 0 auto;" id="divInnerForm">          

            Some Text

        </div>
     </form>
 </iframe>

Ensuite, vous pouvez trouver le texte de cesDiven utilisant le code suivant

var iContentBody = $("#ifrmReportViewer").contents().find("body");
var endLetterSequenceNo = iContentBody.find("#EndLetterSequenceNoToShow").text();

var divInnerFormText = iContentBody.find("#divInnerForm").text();

J'espère que cela aidera quelqu'un.

2
Md. Nazrul Islam

Pourquoi ne pas essayer Ajax, vérifiez un code partie 1 ou partie 2 (utilisez un commentaire).

$(document).ready(function(){ 
	console.clear();
/*
    // PART 1 ERROR
    // Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null".  Both frames are sandboxed and lack the "allow-same-Origin" flag.
	console.log("PART 1:: ");
	console.log($('iframe#sandro').contents().find("html").html());
*/
	// PART 2
	$.ajax({
		url: $("iframe#sandro").attr("src"),
		type: 'GET',
		dataType: 'html'
	}).done(function(html) {
		console.log("PART 2:: ");
		console.log(html);
	});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<body>
<iframe id="sandro" src="https://jsfiddle.net/robots.txt"></iframe>
</body>
</html>

0
KingRider

Cela peut être une autre solution si jquery est chargé dans iframe.html. 

$('#iframe')[0].contentWindow.$("html").html()
0
toshi

Juste pour référence. Voici comment procéder avec JQuery (utile par exemple lorsque vous ne pouvez pas interroger par ID d'élément):

$('#iframe').get(0).contentWindow.document.body.innerHTML
0
mxro