Member Avatar for nizuya

I have a normal html document with an iframe pointed to a .php document (with links to other php documents). I would like the iframe height an/or width to change when page in the iframe changes. For example the initial page would generate an iframe height/width of 800/600. When you click a link in the iframe, the height/width would change to 600/400. Then yet another link would change the iframe, hight/width to 400/900.

I was thinking that i could somehow have variables for height and width set on each of the php documents that might show up in the iframe, and that each time a new page was loaded in the frame the new height/width variables would be sent to the parent frame, and the parent frame would refresh generating an iframe with the new dimensions.

I hope it is clear what I'm trying to do, I can try to clarify if necessary. The main point is I want an iframe to change dimensions base on the content. I don't mind if the parent frame has to refresh, but it must be automatic.

I don't really know much about php code, so I don't know if the idea I explicated above is the best method, or even if it is possible. If there is a better way please tell me how. If it is the best way, how would I code that?

Thanks,
David

  • 3 Contributors
  • 4 Replies
  • 116 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by hivenk

Dani AI

Generated

As and point out, this is a client-side job — PHP just generates the page inside the iframe. For : there are two reliable approaches depending on origin rules.

If the iframe pages are same-origin (same protocol, host, and port), the parent can read the iframe document and set the iframe size after each load. A robust size-calculation uses both body and documentElement values to cover browser differences and should be run on the iframe load event.

function sizeFromIframe(iframe) {
  var doc = iframe.contentDocument || iframe.contentWindow.document;
  var b = doc.body, h = doc.documentElement;
  var height = Math.max(b.scrollHeight, b.offsetHeight, h.clientHeight, h.scrollHeight, h.offsetHeight);
  var width  = Math.max(b.scrollWidth, b.offsetWidth, h.clientWidth, h.scrollWidth, h.offsetWidth);
  iframe.style.height = height + 'px';
  iframe.style.width  = width  + 'px';
}
document.getElementById('myFrame').addEventListener('load', function(){ sizeFromIframe(this); });

If the iframe content is cross-origin, direct access is blocked by the browser. Use the HTML5 postMessage API: inject a tiny script into each PHP page that computes its size and posts it to parent. The parent listens for messages, validates event.origin, and applies the size.

Child (inside iframe):

function sendSize(){ parent.postMessage({h:Math.max(...), w:Math.max(...)}, 'https://parent.example'); }
window.addEventListener('load', sendSize);

Parent:

window.addEventListener('message', function(e){
  if (e.origin !== 'https://expected-iframe-origin') return;
  var d = e.data;
  document.getElementById('myFrame').style.height = d.h + 'px';
});

Notes and tips: validate event.origin when using postMessage; debounce frequent updates (MutationObserver or setTimeout) so resizing isn’t noisy; account for images loading later by sending a size after image load or using MutationObserver inside the iframe; for width, consider using responsive CSS (width:100%) instead of constantly changing pixel widths. If you cannot modify the iframe page and it’s cross-origin, resizing automatically is not possible unless that external page cooperates or you proxy it under your origin.

Recommended Answers

All 4 Replies

Member Avatar for pritaeas

You need to ask this question in a javascript group, they'll know.

Member Avatar for nizuya

I did...
They told me to ask in the PHP forums. :(

Member Avatar for pritaeas

PHP has no knowledge what's happening on the client side. With javascript this may be possible,

try Google: javascript resize iframe

Member Avatar for hivenk

hi
a pritaeas says it can be done by using javascript only, through javascript you make an object by id of the iframe, so that you can get the dimensions of the iframe.
then you can send a value for test to which size you want resize you frame, so by comparing the value you can resize for your size.

if you want for better optimization of the image disply you can use AJAX.

try this, otherwise if you send your code,
i can help you with the code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.