Mam stronę internetową zawierającą 2 elementy iFrames. Oba mają stałą szerokość i wysokość. Wczytuję w nich zewnętrzne strony internetowe. Jak mogę zmienić rozmiar zewnętrznych stron internetowych tak, aby pasowały do ramki iFrame (jak zmienia się przeglądarka mobilna zmieniając widok)?Zmień rozmiar zewnętrznej zawartości witryny, aby dopasować do szerokości iFrame
To, co możesz zrobić, to ustawić określoną szerokość i wysokość w swoim elemencie iframe (na przykład mogą to być wymiary okna), a następnie zastosować do niego przekształcenie skali. Wartość skali będzie proporcją szerokości okna i wymiaru, który chcesz ustawić do elementu iframe.
E.g.
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
+1, naprawdę ładne, ale może nie być rozwiązaniem dla różnych przeglądarek! –
prawda, ale zależy to od twojej definicji rozwiązania opartego na różnych przeglądarkach. AFAIK powinien działać w IE> 8 – Luca
To zadziałało idealnie. Dzięki .... :) –
Wewnątrz ramki IFrame przeglądarka automatycznie renderuje stronę internetową tak, jakby znajdowała się na osobnej stronie, zachowuje się w taki sam sposób, jak na przykład w przypadku zmiany rozmiaru przeglądarki ... strona internetowa zostanie wyświetlona zgodnie z projektem czy jest to płynny projekt o stałych wymiarach czy cokolwiek innego ... nie można wymusić innego zachowania renderowania na stronie. Można jednak programowo zmodyfikować znaczniki strony.
Porada dla 1 strony internetowej zmieniającej wysokość. Ale możesz przejść na 2 strony internetowe.
Oto mój kod do zmiany rozmiaru elementu iframe w zewnętrznej witrynie internetowej. Musisz wstawić kod do strony nadrzędnej (z kodem iframe), a także w zewnętrznej witrynie, więc to nie zadziała, ponieważ nie masz dostępu do edycji zewnętrznej strony internetowej.
lokalny:
<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>
<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>
Trzeba to "frm" prefiks, aby uniknąć problemów z innymi kodami osadzone takich jak Twitter czy Facebook wtyczek. Jeśli masz zwykłą stronę, możesz usunąć prefiks "if" i "frm" na obu stronach (skrypt i onload).
Pilot:
Trzeba jQuery osiągnąć o "prawdziwym" strona wysokości. Nie potrafię sobie poradzić z czystym JavaScriptem, ponieważ masz problem z przeskalowaniem wysokości (wyżej do niższej) za pomocą body.scrollHeight lub pokrewnego. Z jakiegoś powodu zwróci zawsze największą wysokość (wcześniej zredefiniowane).
<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>
Strona nadrzędna (iframe) ma domyślną wysokość 1px. Skrypt wstawia "czekać na wiadomość/wydarzenie" z elementu iframe. Kiedy otrzymasz wiadomość (wiadomość pocztową), a pierwsze 3 znaki to "frm" (aby uniknąć wspomnianego problemu), otrzymasz numer z czwartej pozycji i ustawisz wysokość iframe (styl), w tym jednostkę "px".
Strona zewnętrzna (załadowana w ramce iframe) "wyśle wiadomość" do rodzica (otwierającego) z "frm" i wysokością głównego div (w tym przypadku id "master"). "*" W postmessage oznacza "dowolne źródło".
Mam nadzieję, że to pomoże. Przepraszam za mój angielski.
To nie jest możliwe IMHO [Zobacz tę stronę] (http://stackoverflow.com/questions/3298210/how-to-embed-a-resized-website-throught-an-frame). –
Dzięki za odpowiedź. –
Serdecznie zapraszamy :-) –