Saya sedang mengerjakan aplikasi mirip iGoogle. Konten dari aplikasi lain (di domain lain) ditampilkan menggunakan iframe.
Bagaimana cara mengubah ukuran iframe agar sesuai dengan ketinggian konten iframe?
Saya sudah mencoba menguraikan javascript yang digunakan Google tetapi dikaburkan, dan pencarian web sejauh ini tidak membuahkan hasil.
Pembaruan: Harap perhatikan bahwa konten diambil dari domain lain, sehingga berlaku kebijakan asal yang sama .
Jawaban:
Kami memiliki masalah seperti ini, tetapi sedikit berlawanan dengan situasi Anda - kami menyediakan konten yang dibingkai untuk situs di domain lain, sehingga kebijakan asal yang sama juga menjadi masalah. Setelah menghabiskan berjam-jam trawl google, kami akhirnya menemukan (agak ..) solusi yang bisa diterapkan, yang Anda mungkin dapat beradaptasi dengan kebutuhan Anda.
Ada cara di sekitar kebijakan asal yang sama, tetapi membutuhkan perubahan pada konten berbingkai dan halaman pembingkaian, jadi jika Anda tidak memiliki kemampuan untuk meminta perubahan di kedua sisi, metode ini tidak akan sangat berguna bagi Anda, saya takut.
Ada kekhasan browser yang memungkinkan kita untuk merangkai kebijakan asal yang sama - javascript dapat berkomunikasi baik dengan halaman di domainnya sendiri, atau dengan halaman yang telah dibingkai, tetapi tidak pernah halaman di mana ia dibingkai, misalnya jika Anda memiliki:
www.foo.com/home.html, which iframes
|-> www.bar.net/framed.html, which iframes
|-> www.foo.com/helper.htmlkemudian home.htmldapat berkomunikasi dengan framed.html(iframed) dan helper.html(domain yang sama).
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.htmldapat mengirim pesan ke helper.html(iframed) tetapi tidak home.html (anak tidak dapat berkomunikasi lintas domain dengan orang tua).
Kuncinya di sini adalah helper.htmldapat menerima pesan dari framed.html, dan juga dapat berkomunikasi dengan home.html.
Jadi pada dasarnya, ketika framed.htmlmemuat, ia berhasil ketinggiannya sendiri, memberitahu helper.html, yang meneruskan pesan ke home.html, yang kemudian dapat mengubah ukuran iframe di mana framed.htmlduduk.
Cara paling sederhana yang kami temukan untuk meneruskan pesan dari framed.htmlke helper.htmladalah melalui argumen URL. Untuk melakukan ini, framed.htmlmemiliki iframe dengan yang src=''ditentukan. Ketika onloadmenyala, ia mengevaluasi ketinggiannya sendiri, dan mengatur src iframe pada saat ini menjadihelper.html?height=N
Ada penjelasan di sini tentang bagaimana facebook menanganinya, yang mungkin sedikit lebih jelas daripada saya di atas!
Di www.foo.com/home.html, kode javascript berikut diperlukan (ini dapat diambil dari file .js di domain apa pun, secara tidak sengaja ..):
<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>Dalam 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>Isi dari 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(), saya menggunakan JQuery untuk menangkap pemuatan laman dan peristiwa pengubahan ukuran: $(document).ready(iframeResizePipe); $(window).resize(iframeResizePipe);Ini memungkinkan saya untuk mengatur iframe width="100%"dan jika lebar jendela berubah untuk membuat pembungkus teks atau sesuatu, yang bingkai batin akan menyadari bahwa itu perlu diubah ukurannya.
Jika Anda tidak perlu menangani konten iframe dari domain lain, coba kode ini, itu akan menyelesaikan masalah sepenuhnya dan sederhana:
<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)Anda miliki dan menyederhanakan kode.
https://developer.mozilla.org/en/DOM/window.postMessage
window.postMessage ()
window.postMessage adalah metode untuk mengaktifkan komunikasi lintas asal dengan aman. Biasanya, skrip pada halaman yang berbeda hanya diperbolehkan untuk mengakses satu sama lain jika dan hanya jika halaman yang mengeksekusinya berada di lokasi dengan protokol yang sama (biasanya keduanya http), nomor port (80 menjadi default untuk http), dan host (modulo document.domain diatur oleh kedua halaman dengan nilai yang sama). window.postMessage menyediakan mekanisme yang terkendali untuk menghindari pembatasan ini dengan cara yang aman bila digunakan dengan benar.
Ringkasan
window.postMessage, ketika dipanggil, menyebabkan MessageEvent dikirim pada jendela target ketika semua skrip yang tertunda yang harus dieksekusi selesai (mis. event handler yang tersisa jika window.postMessage dipanggil dari penangan event, timeout yang tertunda yang ditetapkan sebelumnya, dll. ). MessageEvent memiliki tipe pesan, properti data yang diatur ke nilai string dari argumen pertama yang diberikan ke window.postMessage, properti asal yang sesuai dengan asal dokumen utama di jendela panggilan window.postMessage di jendela waktu. postMessage dipanggil, dan properti sumber yang merupakan jendela dari mana window.postMessage dipanggil. (Properti standar acara lainnya hadir dengan nilai yang diharapkan.)
The iFrame-Resizer perpustakaan menggunakan postMessage untuk menjaga iFrame berukuran konten itu, bersama dengan MutationObserver untuk mendeteksi perubahan konten dan tidak tergantung pada jQuery.
https://github.com/davidjbradshaw/iframe-resizer
jQuery: Kebaikan skrip lintas domain
http://benalman.com/projects/jquery-postmessage-plugin/
Telah demo mengubah ukuran jendela iframe ...
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
Artikel ini menunjukkan cara menghapus ketergantungan pada jQuery ... Plus memiliki banyak info berguna dan tautan ke solusi lain.
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Contoh barebones ...
http://onlineaspect.com/uploads/postmessage/parent.html
HTML 5 berfungsi draft pada window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/comms.html#crossDocumentMessages
John Resig di Pesan Lintas Jendela
Cara paling sederhana menggunakan jQuery:
$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
$(this).css("height", $(this).contents().height() + "px");
});Solusi di http://www.phinesolutions.com/use-jquery-to-adjust-the-iframe-height.html bekerja sangat baik (menggunakan jQuery):
<script type=”text/javascript”>
$(document).ready(function() {
var theFrame = $(”#iFrameToAdjust”, parent.document.body);
theFrame.height($(document.body).height() + 30);
});
</script>Saya tidak tahu bahwa Anda perlu menambahkan 30 panjangnya ... Saya bekerja untuk saya.
FYI : Jika Anda sudah memiliki atribut "height" di iFrame Anda, ini hanya menambah style = "height: xxx". Ini mungkin bukan yang Anda inginkan.
mungkin agak terlambat, karena semua jawaban lain lebih tua :-) tapi ... inilah solusi saya. Diuji dalam FF, Chrome, dan Safari 5.0 yang sebenarnya.
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
});
});
});Semoga ini bisa membantu siapa saja.
Akhirnya saya menemukan beberapa solusi lain untuk mengirim data ke situs web induk dari menggunakan iframe window.postMessage(message, targetOrigin); . Di sini saya menjelaskan Bagaimana saya melakukannya.
Situs A = http://foo.com Situs B = http://bar.com
SiteB memuat di dalam situs web siteA
Situs web SiteB memiliki garis ini
window.parent.postMessage("Hello From IFrame", "*"); atau
window.parent.postMessage("Hello From IFrame", "http://foo.com");Kemudian siteA memiliki kode berikut ini
// 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); Jika Anda ingin menambahkan koneksi keamanan, Anda dapat menggunakan ini jika kondisinya dalam 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.
}Untuk IE
Di dalam IFrame:
window.parent.postMessage('{"key":"value"}','*');Di luar:
eventer(messageEvent, function (e) {
var data = jQuery.parseJSON(e.data);
doSomething(data.key);
}, false);Berikut adalah solusi sederhana menggunakan style sheet yang dihasilkan secara dinamis yang dilayani oleh server yang sama dengan konten iframe. Sederhananya style sheet "tahu" apa yang ada di iframe, dan tahu dimensi yang digunakan untuk mendesain iframe. Ini mengatasi batasan kebijakan asal yang sama.
http://www.8degrees.co.nz/2010/06/09/dynamically-resize-an-iframe-depending-on-its-content/
Jadi kode iframe yang disediakan akan memiliki style sheet yang menyertainya seperti ...
<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>
Ini tidak memerlukan logika sisi server untuk dapat menghitung dimensi konten yang diberikan iframe.
Jawaban ini hanya berlaku untuk situs web yang menggunakan Bootstrap. Fitur sematan responsif dari Bootstrap melakukan pekerjaan. Ini didasarkan pada lebar (bukan tinggi) konten.
<!-- 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/
Saya menerapkan solusi frame-in-frame ConroyP untuk menggantikan solusi berdasarkan pengaturan document.domain, tetapi ternyata cukup sulit menentukan tinggi konten iframe dengan benar di browser yang berbeda (pengujian dengan FF11, Ch17 dan IE9 sekarang juga) ).
ConroyP menggunakan:
var height = document.body.scrollHeight;Tapi itu hanya berfungsi pada pemuatan halaman awal. Iframe saya memiliki konten dinamis dan saya perlu mengubah ukuran iframe pada acara tertentu.
Apa yang akhirnya saya lakukan adalah menggunakan properti JS yang berbeda untuk browser yang berbeda.
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 () adalah fungsi pendeteksi browser "terinspirasi" oleh Ext Core http://docs.sencha.com/core/source/Ext.html#method-Ext-apply
Itu bekerja dengan baik untuk FF dan IE tetapi kemudian ada masalah dengan Chrome. Salah satunya adalah masalah waktu, tampaknya Chrome butuh beberapa saat untuk mengatur / mendeteksi tingginya iframe. Dan kemudian Chrome juga tidak pernah mengembalikan tinggi konten di iframe dengan benar jika iframe lebih tinggi dari konten. Ini tidak akan berfungsi dengan konten dinamis ketika ketinggiannya dikurangi.
Untuk mengatasi ini, saya selalu mengatur iframe ke ketinggian rendah sebelum mendeteksi ketinggian konten dan kemudian mengatur tinggi iframe ke nilai yang benar.
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);
}Kode tidak dioptimalkan, ini dari pengujian devel saya :)
Semoga seseorang menemukan ini bermanfaat!
<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>Gadget iGoogle harus secara aktif menerapkan pengubahan ukuran, jadi dugaan saya adalah dalam model lintas-domain Anda tidak dapat melakukan ini tanpa konten jarak jauh yang ikut serta dalam beberapa cara. Jika konten Anda dapat mengirim pesan dengan ukuran baru ke halaman kontainer menggunakan teknik komunikasi lintas domain yang khas, maka sisanya mudah.
Saat Anda ingin memperkecil halaman web agar masuk ke dalam ukuran iframe:
Berikut ini sebuah contoh:
<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>Inilah pendekatan jQuery yang menambahkan info di json melalui atribut src iframe. Ini demo, ubah ukuran dan gulir jendela ini .. url yang dihasilkan dengan json terlihat seperti ini ... http://fiddle.jshell.net/zippyskippy/RJN3G/show/#{docHeight#124,windowHeight:1019,scrollHeight: 571} #
Berikut kode sumber biola 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);
}Bekerja dengan jquery saat dimuat (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);
} pada ukuran di halaman responsif:
$(window).resize(function(){
if($('#containiframe').length !== 0) {
var heightIframe = $('#containiframe').contents().find('body').height();
$('#frame').css("height", heightFrame);
}
});Menggunakan 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>Ini sedikit rumit karena Anda harus tahu kapan halaman iframe telah dimuat, yang mana sulit ketika Anda tidak bisa mengendalikan kontennya. Mungkin untuk menambahkan handler onload ke iframe, tapi saya sudah mencoba ini di masa lalu dan memiliki perilaku yang sangat berbeda di seluruh browser (tidak menebak siapa yang paling menyebalkan ...). Anda mungkin harus menambahkan fungsi ke halaman iframe yang melakukan pengubahan ukuran dan menyuntikkan beberapa skrip ke dalam konten yang mendengarkan memuat acara atau mengubah ukuran acara, yang kemudian memanggil fungsi sebelumnya. Saya sedang berpikir untuk menambahkan fungsi ke halaman karena Anda ingin memastikan keamanannya, tetapi saya tidak tahu betapa mudahnya melakukannya.
Sesuatu di baris ini saya belive harus bekerja.
parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;Muat ini dengan muatan tubuh Anda pada konten iframe.
Saya punya solusi mudah dan mengharuskan Anda menentukan lebar dan tinggi tautan, silakan coba (Ini berfungsi dengan sebagian besar peramban):
<a href='#' onClick=" document.getElementById('myform').src='t2.htm';document.getElementById('myform').width='500px'; document.getElementById('myform').height='400px'; return false">500x400</a>