2015-05-15 2 views
0

Я работаю над сайтом с iFrame. Сам iFrame не имеет полос прокрутки.Как динамически настроить высоту страницы на ее содержимое?

В этом iFrame есть элементы, которые открываются при нажатии на них. Таким образом, проблема в том, что если вы выдвигаете один открытый, который больше высоты iFrame, вы застряли там, поскольку вы не можете прокручивать.

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

Это код JQuery слайд один элемент открытый, который затем также соответствует его содержанию:

$("#effect1").animate({ 
    height: $("#effect2").prop("scrollHeight") 
}, 1000); 
$("#effect2").animate({ 
    height: $("#effect2").prop("scrollHeight") - parseInt($("#effect2").css("padding-top"), 10) - parseInt($("#effect2").css("padding-bottom"), 10) 
}, 1000); 

Так что я думаю, было бы хорошо, чтобы добавить изменение высоты IFrame после этого.

То, что я пытался до сих пор:

Я взял код из this website дело с той же проблемой.

function getDocHeight(doc) { 
    doc = doc || document; 
    // stackoverflow.com/questions/1145850/ 
    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(id) { 
    var ifrm = document.getElementById(id); 
    var doc = ifrm.contentDocument? ifrm.contentDocument: 
     ifrm.contentWindow.document; 
    ifrm.style.visibility = 'hidden'; 
    ifrm.style.height = "10px"; // reset to minimal height ... 
    // IE opt. for bing/msn needs a bit added or scrollbar appears 
    ifrm.style.height = getDocHeight(doc) + 4 + "px"; 
    ifrm.style.visibility = 'visible'; 
} 

Таким образом, после скольжения одного элемента Iframe, я называю setIframeHeight("iframe");. Но есть две проблемы:

  • он чувствует себя немного Тикки, так как высота переходит от одного момента к другому
  • вместо увеличения высоты в IFrame, он увеличивает высоту документа

Так как я могу динамически регулировать высоту iFrame?

ответ

0

Я пробовал много вариантов. Но ни один вариант не лучший. Вы можете попробовать этот способ:

  • В IFRAME, создать функцию интервала (setInterval) работать каждый раз Mili, чтобы проверить изменения высоты документ/элемент. Если он изменился, вызовите родительское окно и перейдите с новым значением высоты, и он будет соответствовать высоте окна iframe.
+0

Ну, но это сложно сделать на CPU ... Я бы скорее выяснил, почему в моем примере он расширяет тело HTML родительского фрейма, а не самого iFrame. – Trollwut

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