Изменение высоты iframe после обновления содержимого

У меня есть несколько вкладок на моей странице, и на одной вкладке этой страницы у меня есть iframe (#quiz_iframe). Этот iframe - это рамка викторины, которая содержится в div (.quiz-div). После нажатия кнопки (.start-quiz), викторина загружается, и новый div (.quiz-content) появляется внутри (.quiz-div). В содержании викторины у меня есть еще 20 divs (.quiz-question), которые разбиты на страницы, поэтому после нажатия кнопки next, prev, вы можете скрыть или показать 5 следующих/предыдущих div.Изменение высоты iframe после обновления содержимого

Ну, дело в том, что я хотел бы настроить высоту iframe для этого содержимого, и я не знаю, как после нажатия .start-quiz.

Теперь у меня есть код, который работает хорошо, когда IFrame загружается в первый раз (это отрегулировать высоту до laoded содержания)

function iframeLoaded() { 
    var iFrameID = document.getElementById('quiz_iframe'); 
    if(iFrameID) { 
     iFrameID.height = ""; 
     iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; 
    }

}

<iframe onload="iframeLoaded()" id="quiz_iframe" src="'.$link.'" style="width:100%;"></iframe>'

Как я могу изменить этот код, чтобы обновить высоту iframe при каждом изменении высоты .quiz-div? И да, iframe находится в том же домене :)

Спасибо!

источник

2014-09-04 zel

возможно дубликат [сделать высоту IFrame динамику на основе содержимого Jquery/внутренняя сторонка Javascript] (http://stackoverflow.com/questions/ 9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript) –

Вызывать 'iframeLoaded()' из скрипта, который меняет содержимое '.quiz-div'? @JamesHill Похоже, что OP уже прочитал этот пост, код в принятом ответе такой же, как в вопросе здесь. – Teemu

Вы можете использовать решение, основанное на postMessage Вам нужно будет включить JavaScript в iframe и на родительскую страницу.

В вашем IFRAME:

window.addEventListener("load", function() { 
    parent.postMessage(getDocumentHeight(), "*"); 
});

В вашей родительской странице:

function receiveIframeHeight(frameWindow, height) { 
    $("iframe").each(function() { 
     if (this.contentWindow === frameWindow) this.height = height; 
    }); 
}; 
window.addEventListener("message", function (e) { 
    receiveIframeHeight(e.source, e.data); 
});

Теперь вы можете слушать событие изменения размера и PostMessage из вашего фрейма на родительской странице. Но остерегайтесь бесконечного цикла.

Чтобы увидеть весь код, который вы должны смотреть на этот Github репо iframe-autoheight-using-postmessage

источник

2014-09-04 13:23:25 Germain

В JQuery, вы можете использовать

$("myContainer .quiz_div").on("resize", function() { 
    $("#quiz_idrame").attr("height", your height calc goes here); 
});

«включено» является обязательным делегированного событие и, таким образом, если добавить/удалить элементы с классом .quiz_div к «MyContainer» есть все, что содержит дивы , он должен связываться.

источник

2014-09-04 13:18:33

'JQuery (функция ($) { \t $ (документ) .ready (функция() { \t \t $ ("тело .quiz_div"). На ("изменить размер", функция() { $ (" # quiz_iframe ") .attr (" высота», +50); }); \t});.' ли что-то вроде этого внутри страницы, загруженной в #quiz_iframe, но это не работает Возможно, я сделал что-то не так? :) – zel

Создайте jsfiddle, и я посмотрю! –

Изменение высоты iframe после обновления содержимого

ответ

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