Как я могу изменить размер модального фрейма, когда в него загружается новая страница?

Question

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

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

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

Answer 1

Здесь есть 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, размер фрейма изменится на
2. при загрузке фрейма, в качестве модальногоневидимый, он не будет изменен, следовательно, он должен изменить размер, пока модель не показана.

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 для этого.В своем фрейме напишите:

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

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

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

Answer 4

Попробуйте поместить это в iframe:

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