it-swarm.com.de

Holen Sie sich mit jQuery HTML in iframe

Hier ist meine Situation.

Ich habe eine Datei mit dem Namen iframe.html, die den Code für eine Bild-Diashow enthält . Der Code ähnelt etwas

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

Benutzer können den Einbettungscode verwenden, um die Diashow ihren Blogs oder Websites hinzuzufügen (kann von verschiedenen Domänen stammen). Angenommen, ein Benutzer muss die Diashow in index.html einbetten. Er kann folgende Zeilen hinzufügen:

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

Dadurch wird der vollständige HTML-Code von iframe.html zu index.html gebracht. Jetzt muss ich auf die Elemente im iframe zugreifen, um einige ihrer Eigenschaften anzupassen.

Wie im Code werden die Breite und die Höhe des Iframes vom Benutzer auf einige feste Abmessungen festgelegt. Ich möchte die Größe der Diashow (und der enthaltenen Bilder) an die Größe des Iframe-Containers anpassen. Was ist der beste Weg, dies zu tun?

Ich habe ohne Erfolg versucht, auf die iframe-Komponenten von index.html über etwas zuzugreifen

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

aber bekomme den Fehler:

TypeError: Die Methode 'Inhalt' von Null kann nicht aufgerufen werden

Ich denke also, die Logik in iframe.html zu implementieren, bei der die Diaschau die Breite und Höhe des übergeordneten Elements prüfen und die Höhe entsprechend festlegen soll.

Ich bin ziemlich verwirrt und hoffe, dass meine Frage für die meisten Sinn macht. Bitte fragen Sie nach weiteren Erklärungen. Deine Hilfe wird wertgeschätzt.

41
Ajit S

Diese Zeile ruft den gesamten HTML-Code des Frames ab. Mit anderen Methoden anstelle von innerHTML können Sie das DOM des inneren Dokuments durchlaufen.

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

Dabei ist zu beachten, dass dies nur funktioniert, wenn sich die Frame-Quelle in derselben Domäne befindet. Wenn es sich um eine andere Domäne handelt, wird der Cross-Site-Scripting-Schutz (XSS) aktiviert.

53
Knaģis

Versuchen Sie diesen Code:

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

Dadurch wird der gesamte HTML-Code in Ihrem Iframe zurückgegeben. Anstelle von .find("html") können Sie einen beliebigen Selektor verwenden, z. B .: .find('body'), .find('div#mydiv').

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

das funktioniert für mich, weil es in ie8 gut funktioniert.

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

wenn Sie jedoch Javascript neben Java verwenden möchten, können Sie dies wie folgt verwenden

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

Wenn SieDivwie folgt in einemIframehaben

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

Dann können Sie den Text dieserDivmithilfe des folgenden Codes finden

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

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

Ich hoffe das hilft jemandem.

2

Probieren Sie Ajax aus, überprüfen Sie einen Code Teil 1 oder Teil 2 (Kommentar verwenden).

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

Dies kann eine andere Lösung sein, wenn Jquery in iframe.html geladen ist. 

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

Nur als Referenz. So gehen Sie mit JQuery vor (nützlich, wenn Sie nicht nach Element-ID abfragen können)

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