Ich arbeite an einer iGoogle-ähnlichen Anwendung. Inhalte aus anderen Anwendungen (in anderen Domänen) werden mithilfe von Iframes angezeigt.
Wie ändere ich die Größe der Iframes an die Höhe des Iframes-Inhalts?
Ich habe versucht, das von Google verwendete Javascript zu entschlüsseln, aber es ist verschleiert, und das Durchsuchen des Webs war bisher erfolglos.
Update: Bitte beachten Sie, dass Inhalte aus anderen Domänen geladen werden, sodass die Richtlinie mit demselben Ursprung gilt.
Antworten:
Wir hatten diese Art von Problem, aber etwas umgekehrt zu Ihrer Situation - wir haben den iframed-Inhalt für Websites in anderen Domains bereitgestellt, sodass dieselbe Ursprungsrichtlinie ebenfalls ein Problem darstellte. Nach vielen Stunden beim Durchsuchen von Google haben wir schließlich eine (etwas ..) praktikable Lösung gefunden, die Sie möglicherweise an Ihre Bedürfnisse anpassen können.
Es gibt einen Weg, um dieselbe Ursprungsrichtlinie zu umgehen, aber es sind Änderungen sowohl am iframed-Inhalt als auch an der Framing-Seite erforderlich. Wenn Sie also nicht auf beiden Seiten Änderungen anfordern können, ist diese Methode für Sie nicht sehr nützlich. Ich fürchte.
Es gibt eine Browser-Eigenart, mit der wir die gleiche Ursprungsrichtlinie umgehen können - Javascript kann entweder mit Seiten in seiner eigenen Domain oder mit Seiten kommunizieren, die iframed hat, aber niemals mit Seiten, in denen es eingerahmt ist, z.
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.htmlhome.htmlkann dann mit framed.html(iframed) und helper.html(derselben Domain) kommunizieren .
Communication options for each page:
+-------------------------+-----------+-------------+-------------+
| | home.html | framed.html | helper.html |
+-------------------------+-----------+-------------+-------------+
| www.foo.com/home.html | N/A | YES | YES |
| www.bar.net/framed.html | NO | N/A | YES |
| www.foo.com/helper.html | YES | YES | N/A |
+-------------------------+-----------+-------------+-------------+framed.htmlkann Nachrichten an helper.html(iframed) senden, aber nicht home.html (Kind kann nicht domänenübergreifend mit Eltern kommunizieren).
Der Schlüssel hier ist , dass helper.htmlempfangen können Nachrichten aus framed.htmlund kann auch kommunizieren mit home.html.
Wenn also framed.htmlgeladen wird, berechnet es im Wesentlichen seine eigene Höhe, sagt helper.html, an welche die Nachricht weitergeleitet wird home.html, und kann dann die Größe des Iframes ändern, in dem er sich framed.htmlbefindet.
Der einfachste Weg, Nachrichten von an framed.htmlzu übergeben, helper.htmlwar ein URL-Argument. Zu diesem framed.htmlZweck wurde ein Iframe mit src=''angegeben. Wenn es onloadausgelöst wird, wertet es seine eigene Höhe aus und setzt den src des iframe an dieser Stelle aufhelper.html?height=N
Hier gibt es eine Erklärung, wie Facebook damit umgeht, die vielleicht etwas klarer ist als meine oben!
In www.foo.com/home.htmlwird der folgende Javascript-Code benötigt (dieser kann übrigens aus einer .js-Datei in einer beliebigen Domain geladen werden ..):
<script>
// Resize iframe to full height
function resizeIframe(height)
{
// "+60" is a general rule of thumb to allow for differences in
// IE & and FF height reporting, can be adjusted as required..
document.getElementById('frame_name_here').height = parseInt(height)+60;
}
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>In www.bar.net/framed.html:
<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>
<script type="text/javascript">
function iframeResizePipe()
{
// What's the page height?
var height = document.body.scrollHeight;
// Going to 'pipe' the data to the parent through the helpframe..
var pipe = document.getElementById('helpframe');
// Cachebuster a precaution here to stop browser caching interfering
pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();
}
</script>Inhalt von www.foo.com/helper.html:
<html>
<!--
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content
-->
<body onload="parentIframeResize()">
<script>
// Tell the parent iframe what height the iframe needs to be
function parentIframeResize()
{
var height = getParam('height');
// This works as our parent's parent is on our domain..
parent.parent.resizeIframe(height);
}
// Helper function, parse param from request string
function getParam( name )
{
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null )
return "";
else
return results[1];
}
</script>
</body>
</html>parentIframeResize(), habe ich JQuery verwendet, um sowohl das Laden der Seite als auch alle Größenänderungsereignisse zu erfassen: Auf $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);diese Weise kann ich den Iframe festlegen width="100%"und wenn sich die Fensterbreite ändert, um einen Textumbruch oder etwas anderes zu erstellen , den Der innere Rahmen erkennt, dass die Größe geändert werden muss.
Wenn Sie keine Iframe-Inhalte aus einer anderen Domäne verarbeiten müssen, probieren Sie diesen Code aus. Dadurch wird das Problem vollständig gelöst und es ist ganz einfach:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<iframe src="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>document.getElementById(id)und den Code zu vereinfachen.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage ist eine Methode zur sicheren Aktivierung der Kommunikation zwischen verschiedenen Ursprüngen. Normalerweise dürfen Skripte auf verschiedenen Seiten nur dann aufeinander zugreifen, wenn sich die Seiten, auf denen sie ausgeführt wurden, an Orten mit demselben Protokoll (normalerweise beide http), Portnummer (80 ist die Standardeinstellung für http) und Host (modulo) befinden document.domain wird von beiden Seiten auf den gleichen Wert gesetzt). window.postMessage bietet einen kontrollierten Mechanismus, um diese Einschränkung auf eine Weise zu umgehen, die bei ordnungsgemäßer Verwendung sicher ist.
Zusammenfassung
Wenn window.postMessage aufgerufen wird, wird ein MessageEvent im Zielfenster ausgelöst, wenn ein ausstehendes Skript abgeschlossen ist, das ausgeführt werden muss (z. B. verbleibende Ereignishandler, wenn window.postMessage von einem Ereignishandler aufgerufen wird, zuvor festgelegte ausstehende Zeitüberschreitungen usw.). ). Das MessageEvent hat den Typ message, eine Dateneigenschaft, die auf den Zeichenfolgenwert des ersten Arguments festgelegt ist, das window.postMessage zur Verfügung gestellt wird, eine Ursprungseigenschaft, die dem Ursprung des Hauptdokuments im Fenster entspricht, das window.postMessage im Zeitfenster aufruft. postMessage wurde aufgerufen und eine Quelleigenschaft, die das Fenster ist, von dem window.postMessage aufgerufen wird. (Andere Standardeigenschaften von Ereignissen sind mit ihren erwarteten Werten vorhanden.)
Die iFrame-Resizer- Bibliothek verwendet postMessage, um die Größe eines iFrame auf seinen Inhalt zu beschränken, und MutationObserver , um Änderungen am Inhalt zu erkennen, und hängt nicht von jQuery ab.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: Domainübergreifende Scripting-Qualität
http://benalman.com/projects/jquery-postmessage-plugin/
Hat eine Demo zum Ändern der Größe des Iframe-Fensters ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Dieser Artikel zeigt, wie Sie die Abhängigkeit von jQuery entfernen ... Plus enthält viele nützliche Informationen und Links zu anderen Lösungen.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Barebones Beispiel ...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5-Arbeitsentwurf für window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig über Cross-Window Messaging
Der einfachste Weg mit jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});Die Lösung auf http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html funktioniert hervorragend (verwendet jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Ich weiß nicht, dass Sie 30 zur Länge hinzufügen müssen ... 1 hat für mich gearbeitet.
Zu Ihrer Information: Wenn Ihr iFrame bereits ein Attribut "height" enthält, wird nur style = "height: xxx" hinzugefügt. Dies ist möglicherweise nicht das, was Sie wollen.
kann etwas spät sein, da alle anderen Antworten älter sind :-) aber ... hier ist meine Lösung. Getestet in FF, Chrome und Safari 5.0.
CSS:
iframe {border:0; overflow:hidden;}Javascript:
$(document).ready(function(){
$("iframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight();
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
});Hoffe das wird jedem helfen.
Schließlich habe ich eine andere Lösung gefunden, um Daten von iframe mit an die übergeordnete Website zu senden window.postMessage(message, targetOrigin);. Hier erkläre ich, wie ich es gemacht habe.
Site A = http://foo.com Site B = http://bar.com
SiteB wird auf der Website siteA geladen
SiteB-Website haben diese Zeile
window.parent.postMessage("Hello From IFrame", "*"); oder
window.parent.postMessage("Hello From IFrame", "http://foo.com");Dann hat siteA diesen folgenden Code
// Here "addEventListener" is for standards-compliant web browsers and "attachEvent" is for IE Browsers.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen to message from child IFrame window
eventer(messageEvent, function (e) {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}, false); Wenn Sie eine Sicherheitsverbindung hinzufügen möchten, können Sie diese if-Bedingung in verwenden eventer(messageEvent, function (e) {})
if (e.origin == 'http://iframe.example.com') {
alert(e.data);
// Do whatever you want to do with the data got from IFrame in Parent form.
}Für IE
Innerhalb von IFrame:
window.parent.postMessage('{"key":"value"}','*');Draußen:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Hier ist eine einfache Lösung, bei der ein dynamisch generiertes Stylesheet verwendet wird, das vom selben Server wie der Iframe-Inhalt bereitgestellt wird. Ganz einfach "weiß" das Stylesheet, was sich im Iframe befindet, und kennt die Abmessungen, die zum Stylen des Iframes verwendet werden sollen. Dies führt zu den gleichen Einschränkungen der Ursprungsrichtlinien.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Der mitgelieferte Iframe-Code hätte also ein begleitendes Stylesheet wie dieses ...
<link href="http://your.site/path/to/css?contents_id=1234&dom_id=iframe_widget" rel="stylesheet" type="text/css" />
<iframe id="iframe_widget" src="http://your.site/path/to/content?content_id=1234" frameborder="0" width="100%" scrolling="no"></iframe>
Dies setzt voraus, dass die serverseitige Logik die Abmessungen des gerenderten Inhalts des Iframes berechnen kann.
Diese Antwort gilt nur für Websites, die Bootstrap verwenden. Die reaktionsschnelle Einbettungsfunktion des Bootstraps erledigt den Job. Es basiert auf der Breite (nicht Höhe) des Inhalts.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/WsFWhL4Y84Y"></iframe>
</div>jsfiddle: http://jsfiddle.net/00qggsjj/2/
Ich implementiere die Frame-in-Frame-Lösung von ConroyP, um eine Lösung zu ersetzen, die auf dem Festlegen von document.domain basiert. Es war jedoch ziemlich schwierig, die Höhe des Iframe-Inhalts in verschiedenen Browsern korrekt zu bestimmen (derzeit mit FF11, Ch17 und IE9 testen) ).
ConroyP verwendet:
var height = document.body.scrollHeight;Dies funktioniert jedoch nur beim ersten Laden der Seite. Mein Iframe hat dynamischen Inhalt und ich muss die Größe des Iframes bei bestimmten Ereignissen ändern.
Am Ende habe ich verschiedene JS-Eigenschaften für die verschiedenen Browser verwendet.
function getDim () {
var body = document.body,
html = document.documentElement;
var bc = body.clientHeight;
var bo = body.offsetHeight;
var bs = body.scrollHeight;
var hc = html.clientHeight;
var ho = html.offsetHeight;
var hs = html.scrollHeight;
var h = Math.max(bc, bo, bs, hc, hs, ho);
var bd = getBrowserData();
// Select height property to use depending on browser
if (bd.isGecko) {
// FF 11
h = hc;
} else if (bd.isChrome) {
// CH 17
h = hc;
} else if (bd.isIE) {
// IE 9
h = bs;
}
return h;
}getBrowserData () ist eine Browser-Erkennungsfunktion, die von Ext Core's http://docs.sencha.com/core/source/Ext.html#method-Ext-apply "inspiriert" wurde
Das hat für FF und IE gut funktioniert, aber dann gab es Probleme mit Chrome. Eines der Probleme war das Timing. Anscheinend dauert es eine Weile, bis Chrome die Höhe des Iframes eingestellt / erkannt hat. Und dann hat Chrome auch nie die Höhe des Inhalts im Iframe korrekt zurückgegeben, wenn der Iframe höher als der Inhalt war. Dies würde bei dynamischen Inhalten nicht funktionieren, wenn die Höhe verringert wird.
Um dies zu lösen, setze ich den Iframe immer auf eine niedrige Höhe, bevor ich die Höhe des Inhalts erkenne und dann die Iframe-Höhe auf den richtigen Wert setze.
function resize () {
// Reset the iframes height to a low value.
// Otherwise Chrome won't detect the content height of the iframe.
setIframeHeight(150);
// Delay getting the dimensions because Chrome needs
// a few moments to get the correct height.
setTimeout("getDimAndResize()", 100);
}Der Code ist nicht optimiert, er stammt aus meinen Entwicklungstests :)
Hoffe jemand findet das hilfreich!
<html>
<head>
<script>
function frameSize(id){
var frameHeight;
document.getElementById(id).height=0 + "px";
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (frameHeight) + "px";
}
</script>
</head>
<body>
<iframe id="frame" src="startframe.html" frameborder="0" marginheight="0" hspace=20 width="100%"
onload="javascript:frameSize('frame');">
<p>This will work, but you need to host it on an http server, you can do it locally. </p>
</body>
</html>iGoogle-Gadgets müssen die Größenänderung aktiv implementieren. Ich vermute also, dass Sie dies in einem domänenübergreifenden Modell nicht tun können, ohne dass der Remote-Inhalt in irgendeiner Weise beteiligt ist. Wenn Ihr Inhalt mithilfe typischer domänenübergreifender Kommunikationstechniken eine Nachricht mit der neuen Größe an die Containerseite senden kann, ist der Rest einfach.
Wenn Sie eine Webseite verkleinern möchten, um sie an die Iframe-Größe anzupassen:
Hier ist ein Beispiel:
<div id="wrap">
<IFRAME ID="frame" name="Main" src ="http://www.google.com" />
</div><style type="text/css">
#wrap { width: 130px; height: 130px; padding: 0; overflow: hidden; }
#frame { width: 900px; height: 600px; border: 1px solid black; }
#frame { zoom:0.15; -moz-transform:scale(0.15);-moz-transform-origin: 0 0; }
</style>Hier ist ein jQuery-Ansatz, der die Informationen in json über das src-Attribut des iframe hinzufügt. Hier ist eine Demo, ändern Sie die Größe und scrollen Sie durch dieses Fenster. Die resultierende URL mit json sieht so aus ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
Hier ist die Quellcode-Geige http://jsfiddle.net/zippyskippy/RJN3G/
function updateLocation(){
var loc = window.location.href;
window.location.href = loc.replace(/#{.*}#/,"")
+ "#{docHeight:"+$(document).height()
+ ",windowHeight:"+$(window).height()
+ ",scrollHeight:"+$(window).scrollTop()
+"}#";
};
//setInterval(updateLocation,500);
$(window).resize(updateLocation);
$(window).scroll(updateLocation); var iframes = document.getElementsByTagName("iframe");
for(var i = 0, len = iframes.length; i<len; i++){
window.frames[i].onload = function(_i){
return function(){
iframes[_i].style.height = window.frames[_i].document.body.scrollHeight + "px";
}
}(i);
}Arbeiten Sie mit jquery on load (browserübergreifend):
<iframe src="your_url" marginwidth="0" marginheight="0" scrolling="No" frameborder="0" hspace="0" vspace="0" id="containiframe" onload="loaderIframe();" height="100%" width="100%"></iframe>
function loaderIframe(){
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
} beim Ändern der Größe auf der Antwortseite:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Verwenden von jQuery:
parent.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
iframe {
width: 100%;
border: 1px solid black;
}
</style>
<script>
function foo(w, h) {
$("iframe").css({width: w, height: h});
return true; // for debug purposes
}
</script>
<iframe src="child.html"></iframe>
</body>child.html
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
var w = $("#container").css("width");
var h = $("#container").css("height");
var req = parent.foo(w, h);
console.log(req); // for debug purposes
});
</script>
<style>
body, html {
margin: 0;
}
#container {
width: 500px;
height: 500px;
background-color: red;
}
</style>
<div id="container"></div>
</body>Dies ist etwas schwierig, da Sie wissen müssen, wann die Iframe-Seite geladen wurde. Dies ist schwierig, wenn Sie nicht die Kontrolle über den Inhalt haben. Es ist möglich, dem Iframe einen Onload-Handler hinzuzufügen, aber ich habe dies in der Vergangenheit versucht und es hat ein sehr unterschiedliches Verhalten zwischen den Browsern (nicht erraten, wer am nervigsten ist ...). Sie müssten wahrscheinlich der iframe-Seite eine Funktion hinzufügen, die die Größenänderung ausführt, und ein Skript in den Inhalt einfügen, das entweder auf das Laden von Ereignissen wartet oder Ereignisse in der Größe ändert, die dann die vorherige Funktion aufrufen. Ich denke, der Seite eine Funktion hinzuzufügen, da Sie sicherstellen möchten, dass sie sicher ist, aber ich habe keine Ahnung, wie einfach dies sein wird.
Etwas in der Art, wie ich glaube, sollte funktionieren.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Laden Sie dies mit Ihrem Körper auf den Iframe-Inhalt.
Ich habe eine einfache Lösung und fordere Sie auf, die Breite und Höhe des Links zu bestimmen. Bitte versuchen Sie es (es funktioniert mit den meisten Browsern):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>