How to resize modal iframe when loading a new page?

Question

I have several linked pages that I want to display in a modal iframe. Pages do not have the same size, and I want to resize the iframe when loading every new page. I looked at a few jquery plugins for creating iframes, but can't figure out how to resize any of them. I am currently experimenting with prettyPhoto and nyroModal, but I am open to suggestions. I just need to make it work. Also, I'm not very good at JavaScript, but I'm trying to learn.

NOTE: all my pages are on my web server, so there is no cross domain problem.

Thanks for all the quick answers. I'm heading to bed, but look forward to your suggestions when I wake up.

Answer 1

Try putting this in an 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

When loading pages in an iframe, you are likely to run into cross-domain access issues. Access to the page inside the iframe from the parent JS is blocked.

If you want to make it easy - keep track of what is loaded in the iframe in your code, and manually resize it to hard-coded sizes.

Create an array of dimensions that you want to use for each page, and use this function:

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

:

• iframe

• 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)); }); }

• iframe, iframe
• when the iframe is loaded because the modal is invisible, it will not change, so it needs to resize the model again.