Mengubah ukuran iframe berdasarkan konten

498

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 .

javascript iframe widget larssg
sumber

584

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.html

kemudian 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!

Kode

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>

ConroyP
sumber

7

benar-benar penuh wawasan. Saya bertanya-tanya mengapa igoogle.com memiliki file helper.html! Terima kasih

IEnumerator

9

Keren terima kasih! Saya membuat beberapa tambahan: Gunakan jQuery untuk mendapatkan tinggi badan di framed.html (masalah FF, tubuh terus bertambah): var height = $ (document.body) .height (); Menggunakan acara yang memuat tubuh untuk membuat bingkai di home.html mirip dengan pendekatan Anda di framed.html. Alamat tidak memperbarui bingkai saat menyegarkan di FF dan Safari.

Abdullah Jibaly

5

Jenius! Selain penambahan Abdullah: daripada mengatur beban tubuh untuk memanggil 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.

StriplingWarrior

9

Saya sarankan memberikan iframe id = frame_name_here atribut ketinggian default seperti height = "2000". Ini berarti ketika halaman memuat konten berbingkai terlihat. Ketika perubahan ukuran terjadi tidak ada "flicker". Ukurannya menyusut / meluas di bawah lipatan halaman. Jika Anda tahu ketinggian maksimum konten berbingkai Anda maka gunakan nilai itu ... ini juga menghasilkan pengalaman noscript yang lebih baik.

Chris Jacob

3

Tujuh tahun kemudian, masih solusi lintas-browser, lintas-domain terbaik yang saya temukan. Bravo.

FurryWombat

81

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>

Ahmy
sumber

9

Mungkin lebih optimal untuk meneruskan elemen itu sendiri ke fungsi untuk menghindari semua yang document.getElementById(id)Anda miliki dan menyederhanakan kode.

Muhd

1

Ini tidak berfungsi untuk saya karena contentWindow.document.body.scrollHeight memiliki 0 dan bukan tinggi sebenarnya.

kroiz

4

Solusi ini, seperti semua yang saya coba, hanya berfungsi jika tingginya meningkat, jika dari halaman yang tinggi Anda menavigasi ke yang lebih pendek, tingginya masih diatur sesuai dengan tinggi yang pertama. Adakah yang menemukan solusi untuk masalah ini?

Eugenio

6

@Eugenio dan semua orang termasuk saya, untuk memperbaiki masalah terakhir ini: lihat stackoverflow.com/questions/3053072/... Sebelum Anda meminta ketinggian dokumen di dalam iframe, Anda harus mengatur ketinggian objek iframe ke "auto". Perhatikan bahwa Anda harus menggunakan style.height bukan hanya tinggi seperti pada jawaban di atas

Kyle

7

Saya tidak mengerti ... Anda memeriksa keberadaan dokumen. GetElementById dan kemudian memanggilnya di luar area yang diperiksa?

Legolas

41

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

http://ejohn.org/blog/cross-window-messaging/

Chris Jacob
sumber

postMessage sendiri bukan cross-browser, tetapi plugin jQuery tampaknya melakukan pekerjaan yang baik memalsukannya saat diperlukan. Hanya masalah sebenarnya adalah "sampah" yang ditambahkan ke bilah URL dalam kasus-kasus di mana postMessage tidak didukung.

Herms

2

postMessage tampaknya adalah X-Browser. Hanya IE yang memiliki bug atau hal-hal yang harus diperhatikan: 1. Komunikasi hanya antara frame atau iframe 2. Hanya mampu memposting string. Lihat: caniuse.com/x-doc-messaging

Christian Kuetbach

3

Pasti menyenangkan melihat Anda menjawab pertanyaan alih-alih menjelaskan tentang teknologi bantuan yang membantu dengan solusi ..

hitautodestruct

periscopedata menggunakan postMessage, jika itu cukup baik untuk mereka, itu cukup baik untuk kita. Inilah dokumen-dokumen mereka: doc.periscopedata.com/docv2/embed-api-options

Yevgeniy Afanasyev

8

Cara paling sederhana menggunakan jQuery:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

Omer Arshad
sumber

14

Tidak lintas domain seperti yang diminta.

willem

6

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.

Macho Matt
sumber

7

Bukan lintas domain, tidak.

Volomike

Apa yang saya butuhkan karena saya tidak melakukan cross-domain, +1 untuk html yang valid.

WildJoe

4

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.

ddlab
sumber

@pashute - maksud Anda "lintas domain"?

Luke

Maaf. Berarti: Tidak berfungsi lintas platform ... Berikut adalah intisari publik: gist.github.com/pashute/c4705ce7f767f50fdf56d0030ecf9192 Mendapat yang Ditolak untuk mengeksekusi kesalahan. Mengubah skrip menjadi type = "text / javascript" tidak membantu. Atau mengatur lebar dan tinggi iframe (katakanlah 80%).

pashute

4

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);

Selvamani
sumber

2

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.

Vaughan Rowsell
sumber

Tautannya rusak. Bisakah Anda membagikan kode yang relevan dalam jawaban Anda sehingga tetap relevan dengan utas ini?

zed

2

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/

http://getbootstrap.com/components/#responsive-embed

Razan Paul
sumber

Ini berfungsi untuk menyematkan video tetapi jika saya ingin menyematkan halaman web dengan ketinggian itu akan bergulir dan tinggi yang aneh.

cabaji99

1

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!

Tor Händevik
sumber

1

<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>

webd3sign
sumber

0

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.

Joeri Sebrechts
sumber

0

Saat Anda ingin memperkecil halaman web agar masuk ke dalam ukuran iframe:

Anda harus mengubah ukuran iframe agar sesuai dengan konten
Maka Anda harus memperkecil seluruh iframe dengan konten halaman web yang dimuat

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>

kaw
sumber

0

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);

chad steele
sumber

0

dapatkan tinggi konten iframe lalu berikan ke iframe ini

 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);
 }

YellowGlue
sumber

1

Bisakah Anda menambahkan semacam deskripsi tentang mengapa kode Anda menjawab pertanyaan?

rhughes

0

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);
}
});

Mario Gonzales Flores
sumber

-1

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>

Nino Škopac
sumber

-2

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.

roryf
sumber

-2

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.

Ólafur Waage
sumber

3

Itu tidak mungkin karena konten di iFrames diambil dari domain lain, jadi mencoba melakukan itu menghasilkan kesalahan, seperti ini dari Firefox: "Izin ditolak untuk mendapatkan properti Window.document".

larssg

-4

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>

فيصل خلبوص
sumber

Mengubah ukuran iframe berdasarkan konten

Jawaban:

dapatkan tinggi konten iframe lalu berikan ke iframe ini