Saya loading halaman aspx web dalam iframe. Konten dalam Iframe dapat lebih tinggi dari iframe's tinggi. Iframe tidak harus memiliki scroll bar.
Saya memiliki wrapper div
tag di dalam iframe yang pada dasarnya adalah semua konten. Saya menulis beberapa jQuery untuk membuat resize terjadi :
$("#TB_window", window.parent.document).height($("body").height() + 50);
mana
TB_window
adalah satu div di mana Iframe
yang terkandung.
tubuh
- tag body dari aspx dalam iframe.
Script ini melekat konten iframe. Saya mendapatkan TB_window
elemen dari halaman induk. Sementara ini bekerja dengan baik di Chrome, tapi TB_window runtuh di Firefox. Saya benar-benar bingung/hilang pada mengapa hal itu terjadi.
Anda dapat mengambil ketinggian IFRAME
's konten dengan menggunakan:
contentWindow.dokumen.tubuh.scrollHeight
Setelah IFRAME
dimuat, maka anda dapat mengubah ketinggian dengan melakukan hal berikut:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
Kemudian, pada IFRAME
tag, anda hook up handler seperti ini:
<iframe id="idIframe" onload="iframeLoaded()" ...
Saya punya situasi beberapa saat yang lalu di mana saya juga dibutuhkan untuk memanggil iframeLoaded
dari IFRAME
dirinya sendiri setelah formulir pengajuan ini terjadi dalam. Anda dapat mencapai itu dengan melakukan hal berikut dalam IFRAME
's konten script:
parent.iframeLoaded();
Yang sedikit membaik jawaban Aristos...
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
Kemudian menyatakan dalam iframe sebagai berikut:
<iframe onload="resizeIframe(this)" ...
Ada dua perbaikan minor:
iframe.height = ","
jika anda're akan menetapkan kembali pada pernyataan berikutnya. Demikian benar-benar menimbulkan overhead seperti anda're berurusan dengan elemen DOM.Edit: Jika konten dalam bingkai selalu berubah maka panggilan:
parent.resizeIframe(this.frameElement);
dari dalam iframe setelah update. Bekerja untuk asal yang sama.
Atau untuk auto detect:
// on resize
this.container = this.frameElement.contentWindow.document.body;
this.watch = () => {
cancelAnimationFrame(this.watcher);
if (this.lastScrollHeight !== container.scrollHeight) {
parent.resizeIframeToContentSize(this.frameElement);
}
this.lastScrollHeight = container.scrollHeight;
this.watcher = requestAnimationFrame(this.watch);
};
this.watcher = window.requestAnimationFrame(this.watch);
Saya menemukan bahwa jawaban yang diterima tidak't cukup, karena X-FRAME-PILIHAN: Allow-Dari isn't didukung di safari atau chrome. Pergi dengan pendekatan yang berbeda, bukan, ditemukan di sebuah presentasi yang diberikan oleh Ben Cuka dari Disqus. Idenya adalah untuk menambahkan event listener untuk orang tua jendela, dan kemudian di dalam iframe, gunakan jendela.postMessage untuk mengirim sebuah acara untuk orang tua mengatakan hal itu untuk melakukan sesuatu (mengubah ukuran iframe).
Jadi dalam dokumen induk, menambahkan event listener:
window.addEventListener('message', function(e) {
var $iframe = jQuery("#myIframe");
var eventName = e.data[0];
var data = e.data[1];
switch(eventName) {
case 'setHeight':
$iframe.height(data);
break;
}
}, false);
Dan di dalam iframe, menulis fungsi untuk mengirim pesan:
function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
Akhirnya, di dalam iframe, tambahkan onLoad untuk tag body untuk api resize fungsi:
<body onLoad="resize();">
Tambahkan ini ke iframe, ini bekerja untuk saya:
onload="this.height=this.contentWindow.document.body.scrollHeight;"
Dan jika anda menggunakan jQuery coba kode ini:
onload="$(this).height($(this.contentWindow.document.body).find(\'div\').first().height());"
Ada empat sifat yang berbeda yang dapat anda lihat untuk mendapatkan ketinggian konten dalam sebuah iFrame.
document.documentElement.scrollHeight
document.documentElement.offsetHeight
document.body.scrollHeight
document.body.offsetHeight
Sayangnya mereka semua dapat memberikan jawaban yang berbeda dan ini adalah inconsistant antara browser. Jika anda mengatur tubuh margin 0 maka dokumen.tubuh.offsetHeight
memberikan jawaban terbaik. Untuk mendapatkan nilai yang benar mencoba fungsi ini; yang diambil dari iframe-resizer perpustakaan yang juga terlihat setelah menjaga iFrame ukuran yang benar ketika perubahan konten,atau browser diubah ukurannya.
function getIFrameHeight(){
function getComputedBodyStyle(prop) {
function getPixelValue(value) {
var PIXEL = /^\d+(px)?$/i;
if (PIXEL.test(value)) {
return parseInt(value,base);
}
var
style = el.style.left,
runtimeStyle = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = value || 0;
value = el.style.pixelLeft;
el.style.left = style;
el.runtimeStyle.left = runtimeStyle;
return value;
}
var
el = document.body,
retVal = 0;
if (document.defaultView && document.defaultView.getComputedStyle) {
retVal = document.defaultView.getComputedStyle(el, null)[prop];
} else {//IE8 & below
retVal = getPixelValue(el.currentStyle[prop]);
}
return parseInt(retVal,10);
}
return document.body.offsetHeight +
getComputedBodyStyle('marginTop') +
getComputedBodyStyle('marginBottom');
}
Jawaban yang lain tidak bekerja untuk saya, jadi saya melakukan beberapa perubahan. Berharap ini akan membantu
$('#iframe').on("load", function() {
var iframe = $(window.top.document).find("#iframe");
iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
});
Hanya dalam kasus ini akan membantu siapa pun. Aku menarik rambut saya mencoba untuk mendapatkan ini untuk bekerja, maka saya melihat bahwa iframe punya kelas entri dengan tinggi:100%. Ketika saya dihapus ini, semuanya bekerja seperti yang diharapkan. Jadi, silakan cek untuk setiap konflik css.
anda juga bisa menambahkan mengulangi requestAnimationFrame untuk anda resizeIframe (misalnya dari @BlueFish's jawaban) yang akan selalu disebut sebelum browser cat tata letak dan anda bisa memperbarui tinggi dari iframe bila isinya telah berubah heights. misalnya bentuk-bentuk masukan, malas konten dimuat dll.
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
window.requestAnimationFrame(() => resizeIframe(iframe));
}
</script>
<iframe onload="resizeIframe(this)" ...
panggilan balik anda harus cukup cepat untuk tidak memiliki dampak besar pada kinerja anda secara keseluruhan
Anda dapat merujuk terkait pertanyaan di sini - https://stackoverflow.com/questions/18765762/how-to-make-width-and-height-of-iframe-same-as-its-parent-div/38917939#38917939
Untuk mengatur ketinggian dinamis -
Dan kode - https://gist.github.com/mohandere/a2e67971858ee2c3999d62e3843889a8
Daripada menggunakan javscript/jquery cara termudah yang saya temukan adalah:
<iframe style="min-height:98vh" src="http://yourdomain.com" width="100%"></iframe>
Di sini 1vh = 1% dari jendela Browser yang tinggi. Jadi teori nilai tinggi yang akan ditetapkan adalah 100vh tapi praktis 98vh melakukan sihir.
Sampel menggunakan PHP htmlspecialchars() + check jika tinggi ada dan > 0:
$my_html_markup = ''; // Insert here HTML markup with CSS, JS... '<html><head></head><body>...</body></html>'
$iframe = '<iframe onload="if(this.contentWindow.document.body.scrollHeight) {this.height = this.contentWindow.document.body.scrollHeight;}" width="100%" src="javascript: \''. htmlspecialchars($my_html_markup) . '\'"></iframe>';
Saya menemukan jawaban dari Troy didn't bekerja. Ini adalah kode yang sama ulang untuk ajax:
$.ajax({
url: 'data.php',
dataType: 'json',
success: function(data)
{
// Put the data onto the page
// Resize the iframe
var iframe = $(window.top.document).find("#iframe");
iframe.height( iframe[0].contentDocument.body.scrollHeight+'px' );
}
});
Untuk menambah potongan jendela yang tampaknya untuk memotong di bagian bawah, terutama jika anda don't telah bergulir saya digunakan:
function resizeIframe(iframe) {
var addHeight = 20; //or whatever size is being cut off
iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
}
Yang satu ini berguna ketika anda membutuhkan solusi dengan jquery. Dalam hal ini anda harus mencoba menambahkan sebuah wadah dan mengatur padding untuk itu dalam persentase
HTML contoh kode:
<div class="iframecontainer">
<iframe scrolling="no" src="..." class="iframeclass"width="999px" height="618px"></iframe>
</div>
Contoh kode CSS:
.iframeclass{
position: absolute;
top: 0;
width: 100%;
}
.iframecontainer{
position: relative;
width: 100%;
height: auto;
padding-top: 61%;
}
Solusi sederhana adalah untuk mengukur lebar dan tinggi dari area konten, dan kemudian menggunakan pengukuran untuk menghitung bantalan bawah persentase.
Dalam hal ini, pengukuran 1680 x 720 px, jadi padding di bawah adalah 720 / 1680 = 0.43 * 100, yang datang ke 43%.
.canvas-container {
position: relative;
padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
height: 0;
overflow: hidden;
}
.canvas-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Yang sedikit membaik jawaban BlueFish...
function resizeIframe(iframe) {
var padding = 50;
if (iframe.contentWindow.document.body.scrollHeight < (window.innerHeight - padding))
iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
else
iframe.height = (window.innerHeight - padding) + "px";
}
Ini mengambil dalam pertimbangan ketinggian jendela layar(browser, telepon) yang baik untuk desain responsif dan iframe yang besar dan tinggi. Bantalan merupakan padding yang anda inginkan di atas dan di bawah iframe dalam kasus ini berjalan melalui seluruh layar.
jQuery('.home_vidio_img1 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery(this).replaceWith(video);
});
jQuery('.home_vidio_img2 img').click(function(){
video = <iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>;
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img3 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
jQuery('.home_vidio_img4 img').click(function(){
video = '<iframe src="'+ jQuery(this).attr('data-video') +'"></iframe>';
jQuery('.home_vidio_img1 img').replaceWith(video);
jQuery('.home_vidio_img1 iframe').replaceWith(video);
});
$(document).height() // - $('body').offset().top
dan / atau
$(window).height()
Melihat Stack Overflow pertanyaan https://stackoverflow.com/questions/806402.
Coba ini untuk dapatkan tinggi tubuh dalam jQuery:
if $("body").height()
Itu doesn't memiliki nilai jika Firebug. Mungkin itu's masalah.