如何在新页面加载时调整模式iframe的大小？

Question

I have several linked pages I want to display in a modal iframe. The pages are not the same size and I want to be able to resize the iframe when each new page is loaded. I have looked at several jquery plugins to create the iframe, but can't figure out how to resize any of them. I am currently experimenting with prettyPhoto and nyroModal, but am open to suggestions. I just need to make it work. Also I am not very good with JavaScript, but I am trying to learn.

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

Thanks for all the quick responses. I'm headed to bed but look forward to trying out your suggestions when I wake up.

Answer 1

Try putting this in the 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 to iframe you probably will encounter cross-domain problems. Accessing page inside the iframe from parent's JS is blocked.

If you want to do it easily - keep track of what is loaded int o the iframe in your code and resize it manually to hard-coded dimensions.

Create an array of dimensions 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

You can use postMessage for this. In your iframe write this:

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

In your main page:

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

Answer 4

There are 2 cases here:

1. iframe is loaded after the modal is open

2. iframe is loaded before the modal is open

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

In case of

1. When the iframe is loaded, the iframe will resize
2. when iframe is loaded, as the modal is invisible, it wont be resize hence it needs to resize again the the model is shown.