Pracuję nad aplikacją podobną do iGoogle. Treści z innych aplikacji (w innych domenach) są wyświetlane przy użyciu ramek iframe.
Jak zmienić rozmiar iframe, aby dopasować go do wysokości zawartości iframe?
Próbowałem rozszyfrować javascript używany przez Google, ale jest on zaciemniony, a wyszukiwanie w sieci było jak dotąd bezowocne.
Aktualizacja: należy pamiętać, że treść jest ładowana z innych domen, dlatego obowiązują zasady tego samego pochodzenia .
Odpowiedzi:
Wystąpił tego rodzaju problem, ale nieco odwrotnie niż w twojej sytuacji - dostarczaliśmy zawartość iframed do witryn w innych domenach, więc problem dotyczył również tej samej zasady pochodzenia . Po wielu godzinach spędzonych na przeszukiwaniu Google, w końcu znaleźliśmy (nieco ..) wykonalne rozwiązanie, które możesz być w stanie dostosować do swoich potrzeb.
Istnieje sposób obejścia tej samej zasady pochodzenia, ale wymaga ona zmian zarówno w treści iframed, jak i na stronie kadrowania, więc jeśli nie możesz poprosić o zmiany po obu stronach, ta metoda nie będzie dla ciebie bardzo przydatna, obawiam się.
Istnieje dziwactwo przeglądarki, które pozwala nam ominąć tę samą zasadę pochodzenia - javascript może komunikować się ze stronami w swojej własnej domenie lub ze stronami, które mają iframed, ale nigdy stronami, na których jest oprawiony, np. Jeśli masz:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.html
następnie home.htmlmoże komunikować się z framed.html(iframed) i helper.html(ta sama domena).
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.htmlmoże wysyłać wiadomości do helper.html(iframed), ale nie home.html (dziecko nie może komunikować się między domenami z rodzicem).
Kluczem tutaj jest to, że helper.htmlmoże odbierać wiadomości framed.htmli może się z nimi komunikowaćhome.html .
Zasadniczo, gdy framed.htmlładuje, oblicza swoją własną wysokość, mówi helper.html, który przekazuje komunikat home.html, który może następnie zmienić rozmiar iframe, w którym framed.htmlsiedzi.
Najprostszym sposobem na przekazanie wiadomości od framed.htmldo helper.htmlbyło użycie argumentu adresu URL. Aby to zrobić, framed.htmlma iframe zsrc='' określony . Gdy onloadstrzela, ocenia swoją wysokość i ustawia w tym miejscu element src iframe nahelper.html?height=N
Tutaj jest wyjaśnienie jak radzi sobie z tym Facebook, co może być nieco jaśniejsze niż moje powyżej!
W www.foo.com/home.htmlprogramie wymagany jest następujący kod javascript (można go załadować z pliku .js w dowolnej domenie, nawiasem mówiąc ...):
<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>W 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>Zawartość 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(), użyłem JQuery do przechwycenia zarówno ładowania strony, jak i wszelkich zdarzeń zmiany rozmiaru: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);Pozwala mi to ustawić ramkę iframe width="100%"i jeśli szerokość okna zmieni się, aby zawinąć tekst lub coś takiego, wewnętrzna rama rozpozna, że należy ją zmienić.
Jeśli nie musisz obsługiwać treści iframe z innej domeny, wypróbuj ten kod, to całkowicie rozwiąże problem i jest to proste:
<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)które masz i uprościć kod.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage to metoda bezpiecznego włączania komunikacji między źródłami. Zwykle skrypty na różnych stronach mają dostęp do siebie tylko wtedy i tylko wtedy, gdy strony, które je wykonały, znajdują się w lokalizacjach z tym samym protokołem (zwykle oba http), numerem portu (domyślnym 80 dla http) i hostem (modulo document.domain jest ustawiany przez obie strony na tę samą wartość). window.postMessage zapewnia kontrolowany mechanizm umożliwiający obejście tego ograniczenia w sposób bezpieczny, gdy jest właściwie stosowany.
Podsumowanie
wywołanie window.postMessage powoduje wywołanie MessageEvent w oknie docelowym po zakończeniu dowolnego oczekującego skryptu, który musi zostać wykonany (np. pozostałe procedury obsługi zdarzeń, jeśli wywołanie window.postMessage jest wywoływane z procedury obsługi zdarzeń, wcześniej ustawione limity czasu oczekiwania itp. ). MessageEvent ma komunikat typu, właściwość danych, która jest ustawiona na wartość ciągu pierwszego argumentu przekazanego do window.postMessage, właściwość origin odpowiadającą pochodzeniu głównego dokumentu w oknie wywołującym window.postMessage w oknie czasowym. wywołano postMessage oraz właściwość source, która jest oknem, z którego wywoływane jest okno.postMessage. (Inne standardowe właściwości zdarzeń są obecne wraz z ich oczekiwanymi wartościami).
Biblioteka iFrame-Resizer używa postMessage do utrzymania rozmiaru iFrame do jego zawartości, wraz z MutationObserver do wykrywania zmian w treści i nie zależy od jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: Skrypty między domenami
http://benalman.com/projects/jquery-postmessage-plugin/
Ma demonstrację zmiany rozmiaru okna iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
W tym artykule pokazano, jak usunąć zależność od jQuery ... Plus zawiera wiele przydatnych informacji i łączy do innych rozwiązań.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Przykład bez kości ...
http://onlineaspect.com/uploads/postmessage/parent.html
Wersja robocza HTML 5 na window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig o przesyłaniu wiadomości między oknami
Najprostszy sposób przy użyciu jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});Rozwiązanie na http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html działa świetnie (używa jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Nie wiem, czy musisz dodać 30 do długości ... 1 zadziałało dla mnie.
FYI : Jeśli masz już atrybut „wysokość” w ramce iFrame, dodaje to po prostu style = „height: xxx”. To może nie być to, czego chcesz.
może się trochę spóźnić, ponieważ wszystkie pozostałe odpowiedzi są starsze :-), ale ... oto moje rozwiązanie. Testowane w rzeczywistych FF, Chrome i 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
});
});
});Mam nadzieję, że to pomoże każdemu.
Wreszcie znalazłem inne rozwiązanie do wysyłania danych do strony nadrzędnej z wykorzystaniem iframe window.postMessage(message, targetOrigin);. Tutaj wyjaśniam, jak to zrobiłem.
Witryna A = http://foo.com Witryna B = http://bar.com
Witryna B ładuje się w witrynie witryny A.
Witryna SiteB ma tę linię
window.parent.postMessage("Hello From IFrame", "*"); lub
window.parent.postMessage("Hello From IFrame", "http://foo.com");Następnie witryna A ma następujący kod
// 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); Jeśli chcesz dodać połączenie bezpieczeństwa, możesz użyć tego, jeśli warunek w 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.
}Dla IE
Wewnątrz IFrame:
window.parent.postMessage('{"key":"value"}','*');Na zewnątrz:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Oto proste rozwiązanie wykorzystujące dynamicznie generowany arkusz stylów obsługiwany przez ten sam serwer, co treść iframe. Po prostu arkusz stylów „wie”, co jest w ramce iframe, i zna wymiary, które mają być użyte do stylowania ramki iframe. Pozwala to obejść te same ograniczenia dotyczące zasad pochodzenia.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Tak więc dostarczony kod iframe będzie miał dołączony arkusz stylów, taki jak ...
<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>
Wymaga to, aby logika po stronie serwera mogła obliczyć wymiary renderowanej zawartości elementu iframe.
Ta odpowiedź dotyczy tylko stron internetowych korzystających z Bootstrap. Responsywna funkcja osadzania Bootstrap spełnia swoje zadanie. Opiera się na szerokości (nie wysokości) treści.
<!-- 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/
Wdrażam rozwiązanie ConroyP „klatka w ramce”, aby zastąpić rozwiązanie oparte na ustawieniu document.domain, ale stwierdziłem, że dość trudne jest prawidłowe określenie wysokości zawartości elementu iframe w różnych przeglądarkach (testowanie teraz z FF11, Ch17 i IE9 ).
ConroyP wykorzystuje:
var height = document.body.scrollHeight;Ale to działa tylko przy początkowym ładowaniu strony. Mój iframe ma dynamiczną zawartość i muszę zmienić rozmiar iframe w przypadku niektórych zdarzeń.
Skończyło się na użyciu różnych właściwości JS dla różnych przeglądarek.
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 () to funkcja wykrywania przeglądarki „zainspirowana” przez http://docs.sencha.com/core/source/Ext.html#method-Ext-apply Ext Core
To działało dobrze dla FF i IE, ale potem były problemy z Chrome. Jednym z nich był problem z synchronizacją, najwyraźniej Chrome zajmuje trochę czasu, aby ustawić / wykryć wysokość iframe. A potem Chrome również nigdy nie zwracał poprawnie wysokości treści w ramce iframe, jeśli ramka była wyższa niż treść. Nie działałoby to z zawartością dynamiczną, gdy wysokość jest zmniejszona.
Aby rozwiązać ten problem, zawsze ustawiam ramkę iframe na niską wysokość przed wykryciem wysokości zawartości, a następnie ustawiam wysokość ramki iframe na jej prawidłową wartość.
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);
}Kod nie jest zoptymalizowany, pochodzi z moich testów rozwojowych :)
Mam nadzieję, że ktoś uzna to za pomocne!
<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>Gadżety iGoogle muszą aktywnie wdrażać zmianę rozmiaru, więc sądzę, że w modelu obejmującym wiele domen nie można tego zrobić bez udziału treści zdalnych. Jeśli treść może wysłać wiadomość o nowym rozmiarze do strony kontenera przy użyciu typowych technik komunikacji między domenami, reszta jest prosta.
Jeśli chcesz pomniejszyć stronę internetową, aby dopasować ją do rozmiaru elementu iframe:
Oto przykład:
<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>Oto podejście jQuery, które dodaje informacje w jsonie poprzez atrybut src iframe. Oto wersja demonstracyjna, zmiana rozmiaru i przewijanie tego okna .. wynikowy adres URL z jsonem wygląda następująco ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight:5124,windowHeight:1019,scrollHeight: 571} #
Oto kod źródłowy fiddle 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);
}Praca z jquery przy ładowaniu (w różnych przeglądarkach):
<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);
} przy zmianie rozmiaru na responsywnej stronie:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Korzystanie z 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>Jest to nieco trudne, ponieważ musisz wiedzieć, kiedy strona iframe została załadowana, co jest trudne, gdy nie kontrolujesz jej zawartości. Możliwe jest dodanie modułu obsługi obciążenia do ramki iframe, ale próbowałem tego w przeszłości i ma on bardzo różne zachowanie w różnych przeglądarkach (nie zgadnij, kto jest najbardziej denerwujący ...). Prawdopodobnie musiałbyś dodać funkcję do strony iframe, która wykonuje zmianę rozmiaru i wstrzyknąć skrypt do treści, która nasłuchuje, aby załadować zdarzenia lub zmienić rozmiar zdarzeń, która następnie wywołuje poprzednią funkcję. Myślę, że dodaj funkcję do strony, ponieważ chcesz się upewnić, że jest bezpieczna, ale nie mam pojęcia, jak łatwo będzie to zrobić.
Coś na zasadzie tego, w co wierzę, powinno działać.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Załaduj to swoim ciałem do treści iframe.
Mam proste rozwiązanie i wymaga określenia szerokości i wysokości w linku, spróbuj (działa w większości przeglądarek):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>