Как автоматически сжимать высоту iframe динамически?

Я использую следующий код для достижения динамического IFrame высоты:Как автоматически сжимать высоту iframe динамически?

В <head>:

<script language="javascript" type="text/javascript"> 
function resizeIframe(obj) { 
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; 
} 
</script>

В <body>:

<iframe name="myiframe" src="somepage.html" width="100%" frameborder="0" 
scrolling="no" onload='javascript:resizeIframe(this);' /> 
</iframe>

Этот код прекрасно работает с высотой только увеличивается. Таким образом, когда содержимое внутри iframe увеличивается по высоте, iframe обновляет его высоту и увеличивается с ним.

Проблема с высотой уменьшение или усадка. Когда содержимое внутри iframe уменьшается, оно не уменьшается и вызывается большое нежелательное пустое пространство. Это происходит только в Chrome, IE & FF отлично работает.

Here is my Page

Я хочу знать, как сделать этот код работает на автосокращение высоту Iframe, когда она уменьшается?

Скриншот один:

Screenshot one

Скриншот два:

Screenshot two

Обновление 1

я поместил следующий код в <head>

<script src="jquery-1.10.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(function(){ 
var iframeDoc = $('iframe[name="dservers"]').contents().get(0); 
$('iframe[name="dservers"]').load(function(){ 
    docHeight = $(iframeDoc).height(); 
    $('iframe[name="dservers"]').height(docHeight); 
}); 
});

IFrame код в <body>

<iframe name="dservers" src="dual_core.html" width="100%" frameborder="0" 
scrolling="no" /></iframe>

IFrame не отображается на странице. Он появляется в течение одной секунды, а затем исчезает.

Update 2

Я думаю, что проблема была $ символ перед (function(){, я удалил его. Извините, у меня нет большого опыта работы с jquery. Я обновил страницу и удалил onload="resizeFrame()", но iframe не работает динамически.

источник

2013-12-10 Mina Hafzalla

Дублированный [Ваш предыдущий одного и того же вопроса здесь] (http://stackoverflow.com/questions/20495933/how-to-make-unwanted-white-space-shrink-in-webpage/20496181 # 20496181) Это решение будет работать для вас, если вы его правильно реализуете. – wrxsti

Проблема решаемая

Я копал в Интернете, и я нашел код решить всю проблему для меня. Я хотел бы поделиться им, чтобы любой мог использовать его, чтобы получить динамическую высоту iframe.

Первый, поместите следующий код между <head> тегами:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
function getDocHeight(doc) { 
doc = doc || document; 
var body = doc.body, html = doc.documentElement; 
var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); 
return height; 
} 
function setIframeHeight(myiframeid) { 
var ifrm = document.getElementById(myiframeid); 
var doc = ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document; 
ifrm.style.visibility = 'hidden'; 
ifrm.style.height = "10px"; 
ifrm.style.height = getDocHeight(doc) + 5+"px"; 
ifrm.style.visibility = 'visible'; 
} 
</script> 
<script>(function(run){ 
for (i=0;i<frames.length; i++) { 
var f1 = document.getElementsByTagName('myiframename')[i]; 
if(!f1 && window.addEventListener && !run){ 
document.addEventListener('DOMContentLoaded', arguments.callee, false); 
return; 
} 
if(!f1){setTimeout(arguments.callee, 300); return;} 
f2 = f1.cloneNode(false); 
f1.src = 'about: blank'; 
f2.frameBorder = '0'; 
f2.allowTransparency = 'yes'; 
f2.scrolling = 'no'; 
f1.parentNode.replaceChild(f2, f1); 
} 
})(); 
</script>

Второй, код Iframe в <body>:

<iframe id="myiframeid" name="myiframename" src="somepage.html" width="100%" 
frameborder="0" scrolling="no" onload='javascript:setIframeHeight(this.id);' /> 
</iframe>

Третий и наконец, CSS :

#myiframeid{ 
width: 100%; 
}

Примечание: Вы должны Имя и ID для Iframe.

Совместимость со всеми браузерами (Chrome, Firefox, IE).

Удачного дня!

источник

2013-12-12 09:31:48

Я подумал об этом совсем немного и подумал, что придумал другое решение, которое может решить вашу проблему из родительского документа. Вместо редактирования документов в вашем iframe. Однако я не могу проверить это из-за политики перекрестного происхождения. Попробуйте это и дайте мне знать, как это работает.

var iframeDoc = $('iframe[name="dservers"]').contents().get(0); 
$('iframe[name="dservers"]').load(function(){ 
    docHeight = $(iframeDoc).height(); 
    $('iframe[name="dservers"]').height(docHeight); 
});

Надеюсь, это будет вам.

Редактировать: Это исправление потребует удаления функции onload = "".

Редактировать-2: Кажется, вы объединили два сценария. У вас есть это:

function resizeIframe(obj) { 
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; 
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0); 
$('iframe[name="dservers"]').load(function(){ 
    docHeight = $(iframeDoc).height(); 
    $('iframe[name="dservers"]').height(docHeight); 
}); 
    }

Заменить весь этот сценарий с этим:

$(function(){ 
    var iframeDoc = $('iframe[name="dservers"]').contents().get(0); 
    $('iframe[name="dservers"]').load(function(){ 
     docHeight = $(iframeDoc).height(); 
     $('iframe[name="dservers"]').height(docHeight); 
    }); 
});

И удалить OnLoad = "resizeFrame()" из тега IFrames.

источник

2013-12-10 21:24:02 wrxsti

Большое спасибо, я собираюсь попробовать это сейчас и вернуться с результатом. –

К сожалению, это не сработало. Я не уверен, правильно ли я это реализую, но я прикрепил «jquery-1.10.2.min.js» на родительской странице, скопировал и вставил ваш код между следующими тегами

Как автоматически сжимать высоту iframe динамически?

ответ

Смежные вопросы