Как изменить размер модального iframe при загрузке новой страницы?

Question

У меня есть несколько связанных страниц, которые я хочу отобразить в модальном iframe. Страницы не имеют одинакового размера, и я хочу изменить размер iframe при загрузке каждой новой страницы. Я посмотрел несколько плагинов jquery для создания iframe, но не могу понять, как изменить размер любого из них. В настоящее время я экспериментирую с prettyPhoto и nyroModal, но я открыт для предложений. Мне просто нужно заставить его работать. Также я не очень хорошо разбираюсь в JavaScript, но я стараюсь учиться.

ПРИМЕЧАНИЕ: все мои страницы находятся на моем веб-сервере, поэтому нет проблемы с перекрестным доменом.

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

Answer 1

Попробуйте положить это в IFRAME:

document.onload = function() { 
    var i = parent.document.getElementById('myIframe'); 
    i.style.width = document.body.offsetWidth+"px"; 
    i.style.height = document.body.offsetHeight+"px"; 
} 

Answer 2

При загрузке страницы в IFrame вы, вероятно, будут сталкиваться с проблемами между доменами. Доступ к странице внутри iframe из JS родителя заблокирован.

Если вы хотите сделать это легко - следите за тем, что загружено в iframe в коде, и измените его размер вручную до жестко заданных размеров.

Создать массив размеров, которые вы хотите использовать для каждой страницы и использовать эту функцию:

function() { 
    var i = document.getElementById('myIframe'); 
    var sr=i.src; 
    i.style.width = myDimensionsArray[sr][w]+"px"; 
    i.style.height = myDimensionsArray[sr][h]+"px"; 
} 

Answer 3

Вы можете использовать PostMessage для этого. В вашем IFRAME написать это:

document.body.onload=function(){ 
    parent.postMessage("resize_me", "*"); 
}

В главной странице:

window.addEventListener("message", function(e){ 
    if(e.data=="resize_me") { 
    //resize the iframe 
    } 
}

Answer 4

Есть 2 случая здесь:

1. IFrame загружается после модального открыт

2. IFrame загружается до модальный открыт

   function resizeIframe(obj){ obj.style.height = 0; obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } $(".modal").on('shown.bs.modal', function() { resizeIframe(document.getElementById(IFRAME_ID)); }); window.onload=function(){ document.getElementById('IFRAME_ID').addEventListener('load', function(){ resizeIframe(document.getElementById(IFRAME_ID)); }); }

В случае

1. Когда IFrame загружен, IFrame будет изменять размер
2. , когда IFrame загружается, как модальное является невидимым, он не будет изменять размеры, следовательно, она должна снова изменить размер модель показана.