Sto lavorando a un'applicazione simile a iGoogle. Il contenuto di altre applicazioni (su altri domini) viene mostrato utilizzando iframe.
Come posso ridimensionare gli iframe per adattarli all'altezza del contenuto degli iframe?
Ho provato a decifrare il javascript che Google utilizza ma è offuscato e la ricerca sul web è stata finora inutile.
Aggiornamento: tieni presente che il contenuto viene caricato da altri domini, pertanto si applica la politica della stessa origine .
Risposte:
Abbiamo avuto questo tipo di problema, ma leggermente invertito rispetto alla tua situazione: fornivamo il contenuto iframe a siti su altri domini, quindi anche la stessa politica di origine era un problema. Dopo molte ore trascorse a cercare Google, alla fine abbiamo trovato una soluzione (piuttosto ..) praticabile, che potresti essere in grado di adattare alle tue esigenze.
C'è un modo per aggirare la stessa politica di origine, ma richiede modifiche sia sul contenuto iframe che sulla pagina di inquadramento, quindi se non hai la possibilità di richiedere modifiche su entrambi i lati, questo metodo non ti sarà molto utile, Ho paura.
Esiste una stranezza del browser che ci consente di evitare la stessa politica di origine: javascript può comunicare con pagine del proprio dominio o con pagine con iframe, ma mai con pagine in cui è inquadrato, ad esempio se si dispone di:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.htmlquindi home.htmlpuò comunicare con framed.html(iframe) e helper.html(stesso dominio).
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.htmlpuò inviare messaggi a helper.html(iframe) ma non home.html (il bambino non può comunicare tra domini con il genitore).
La chiave qui è che helper.htmlpuò ricevere messaggi framed.htmle anche comunicare con home.html.
Quindi, essenzialmente, quando viene framed.htmlcaricato, viene elaborato la propria altezza, indica a helper.htmlchi passa il messaggio home.html, che può quindi ridimensionare l'iframe in cui si framed.htmltrova.
Il modo più semplice che abbiamo trovato per passare i messaggi da framed.htmla helper.htmlera attraverso un argomento URL. Per fare questo, framed.htmlha un iframe con src=''specificato. Quando onloadspara, valuta la propria altezza e imposta a questo punto l'src dell'iframehelper.html?height=N
C'è una spiegazione qui su come gestirlo su Facebook, che potrebbe essere leggermente più chiaro del mio sopra!
In www.foo.com/home.html, è richiesto il seguente codice javascript (che può essere caricato da un file .js su qualsiasi dominio, per inciso ..):
<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>Contenuto di 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(), ho usato JQuery per catturare sia il caricamento della pagina sia eventuali eventi di ridimensionamento: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);questo mi permette di impostare l'iframe width="100%"e se la larghezza della finestra cambia per avvolgere il testo o qualcosa del genere, il il telaio interno riconoscerà che deve essere ridimensionato.
Se non è necessario gestire il contenuto iframe di un dominio diverso, provare questo codice, risolverà completamente il problema ed è semplice:
<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)che hai e semplificare il codice.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage è un metodo per abilitare in sicurezza la comunicazione tra origini. Normalmente, gli script su pagine diverse possono accedere reciprocamente solo se e solo se le pagine che le hanno eseguite si trovano in posizioni con lo stesso protocollo (di solito entrambi http), il numero di porta (80 è l'impostazione predefinita per http) e l'host (modulo document.domain impostato da entrambe le pagine sullo stesso valore). window.postMessage fornisce un meccanismo controllato per aggirare questa limitazione in modo sicuro se usato correttamente.
Sommario
window.postMessage, quando chiamato, fa in modo che un MessageEvent venga spedito nella finestra di destinazione quando viene completato uno script in sospeso che deve essere eseguito (ad es. i gestori di eventi rimanenti se window.postMessage viene chiamato da un gestore di eventi, timeout in sospeso impostati in precedenza, ecc. ). MessageEvent ha il tipo message, una proprietà data impostata sul valore stringa del primo argomento fornito a window.postMessage, una proprietà origin corrispondente all'origine del documento principale nella finestra che chiama window.postMessage nella finestra temporale. è stato chiamato postMessage e una proprietà source che è la finestra da cui viene chiamato window.postMessage. (Altre proprietà standard degli eventi sono presenti con i loro valori previsti.)
La libreria iFrame-Resizer usa postMessage per mantenere un iFrame dimensionato al suo contenuto, insieme a MutationObserver per rilevare le modifiche al contenuto e non dipende da jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: bontà di scripting tra domini
http://benalman.com/projects/jquery-postmessage-plugin/
Ha una demo di ridimensionamento della finestra iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Questo articolo mostra come rimuovere la dipendenza da jQuery ... Plus ha molte informazioni utili e collegamenti ad altre soluzioni.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Esempio di barebone ...
http://onlineaspect.com/uploads/postmessage/parent.html
Bozza di lavoro HTML 5 su window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig su Cross-Window Messaging
Il modo più semplice con jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});La soluzione su http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html funziona alla grande (usa jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Non so che devi aggiungere 30 alla lunghezza ... 1 ha funzionato per me.
FYI : Se hai già un attributo "height" sul tuo iFrame, questo aggiunge solo style = "height: xxx". Questo potrebbe non essere quello che vuoi.
potrebbe essere un po 'in ritardo, poiché tutte le altre risposte sono più vecchie :-) ma ... ecco la mia soluzione. Testato su FF, Chrome e Safari 5.0 effettivi.
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
});
});
});Spero che questo possa aiutare chiunque.
Alla fine ho trovato un'altra soluzione per l'invio di dati al sito Web principale da iframe utilizzando window.postMessage(message, targetOrigin);. Qui spiego come ho fatto.
Sito A = http://foo.com Sito B = http://bar.com
Il sitoB si sta caricando all'interno del sito Web di siteA
Il sito Web SiteB ha questa linea
window.parent.postMessage("Hello From IFrame", "*"); o
window.parent.postMessage("Hello From IFrame", "http://foo.com");Quindi siteA ha questo codice seguente
// 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); Se si desidera aggiungere una connessione di sicurezza, è possibile utilizzare questo se condizione in 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.
}Per IE
All'interno di IFrame:
window.parent.postMessage('{"key":"value"}','*');Al di fuori:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Ecco una semplice soluzione che utilizza un foglio di stile generato dinamicamente offerto dallo stesso server del contenuto iframe. Molto semplicemente il foglio di stile "conosce" cosa c'è nell'iframe e conosce le dimensioni da usare per dare uno stile all'iframe. Ciò aggira le stesse restrizioni sulla politica di origine.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Quindi il codice iframe fornito avrebbe un foglio di stile di accompagnamento in questo modo ...
<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>
Ciò richiede che la logica lato server sia in grado di calcolare le dimensioni del contenuto renderizzato dell'iframe.
Questa risposta è applicabile solo per i siti Web che utilizzano Bootstrap. La funzione di incorporamento reattivo di Bootstrap fa il lavoro. Si basa sulla larghezza (non altezza) del contenuto.
<!-- 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/
Sto implementando la soluzione frame-in-frame di ConroyP per sostituire una soluzione basata sull'impostazione document.domain, ma ho trovato molto difficile determinare correttamente l'altezza del contenuto dell'iframe in diversi browser (test con FF11, Ch17 e IE9 in questo momento ).
ConroyP utilizza:
var height = document.body.scrollHeight;Ma questo funziona solo sul caricamento della pagina iniziale. Il mio iframe ha contenuti dinamici e ho bisogno di ridimensionare l'iframe su determinati eventi.
Quello che ho finito per fare è stato usare diverse proprietà JS per i diversi browser.
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 () è la funzione di rilevamento del browser "ispirata" da http://docs.sencha.com/core/source/Ext.html#method-Ext-apply di Ext Core
Funzionava bene per FF e IE, ma poi c'erano problemi con Chrome. Uno dei problemi era il tempismo, a quanto pare Chrome impiegava un po 'di tempo per impostare / rilevare l'altezza dell'iframe. Inoltre, Chrome non ha mai restituito correttamente l'altezza del contenuto nell'iframe se l'iframe era superiore al contenuto. Ciò non funzionerebbe con i contenuti dinamici quando l'altezza è ridotta.
Per risolvere questo problema, ho sempre impostato l'iframe su un'altezza bassa prima di rilevare l'altezza del contenuto e quindi impostare l'altezza dell'iframe sul valore corretto.
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);
}Il codice non è ottimizzato, è dal mio test di sviluppo :)
Spero che qualcuno lo trovi utile!
<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>I gadget iGoogle devono implementare attivamente il ridimensionamento, quindi suppongo sia in un modello tra domini che non puoi farlo senza che il contenuto remoto partecipi in qualche modo. Se i tuoi contenuti possono inviare un messaggio con le nuove dimensioni alla pagina del contenitore utilizzando le tecniche di comunicazione tipiche tra domini, il resto è semplice.
Quando si desidera ridurre una pagina Web per adattarla alle dimensioni dell'iframe:
Ecco un esempio:
<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>Ecco un approccio jQuery che aggiunge le informazioni in json tramite l'attributo src dell'iframe. Ecco una demo, ridimensiona e scorri questa finestra .. l'url risultante con json è simile a questo ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
Ecco il violino del codice sorgente 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);
}Lavora con jquery al caricamento (cross browser):
<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);
} su ridimensionamento in pagina reattiva:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Utilizzando 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>Questo è leggermente complicato poiché devi sapere quando la pagina iframe è stata caricata, il che è difficile quando non hai il controllo del suo contenuto. È possibile aggiungere un gestore onload all'iframe, ma l'ho provato in passato e ha un comportamento molto diverso tra i browser (non indovina chi è il più fastidioso ...). Probabilmente dovresti aggiungere una funzione alla pagina iframe che esegue il ridimensionamento e iniettare alcuni script nel contenuto che ascolta il caricamento di eventi o ridimensiona gli eventi, che quindi chiama la funzione precedente. Sto pensando di aggiungere una funzione alla pagina poiché vuoi assicurarti che sia sicura, ma non ho idea di quanto sarà facile farlo.
Credo che qualcosa del genere dovrebbe funzionare.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Caricalo con il tuo body onload sul contenuto iframe.
Ho una soluzione semplice e ti richiede di determinare la larghezza e l'altezza nel link, per favore prova (Funziona con la maggior parte dei browser):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>