Resize IFRAME to remove scrollbars

Question

I have an iframe on my page that I want to change every time the content changes, so there is no scrolling. The content of the frame changes frequently without changing the URL. I want all the content from the frame to be displayed all the time, without changing the flicker of the screen while changing the frame size. Parent and frame are in the same domain.

Right now I'm calling a function to set the frame size when I think the size has changed. How can I do this without calling this function everywhere?

If this helps, I use angularJS.

Answer 1

You can get the height of iFrames content on [iframe] .contentWindow.document.body.offsetHeight . If you do not know when the size of the content changes, you need to check it manually using setInterval() .

Answer 2

Try iframe-resizer , the js-drop module to automatically resize iframes.

Answer 3

Try this, call the resize function in the event listener, when the iframe ever loads, it will fire

 var iframe = document.getElementById('myIframe'); var resizeFunction= function() {$("#myIframe").css({ height: iframe.$("body").outerHeight() });}; if(iframe.addEventListener){ iframe.addEventListener('load', resizeFunction, true); }else if(iframe.attachEvent){ iframe.attachEvent('onload',resizeFunction); } 

Answer 4

This is a feature that I used on one of my sites. I changed the code to be placed in the directive.

Note. In iframe, your container must have ifrm_container

 <iframe resize-iframe id="iframe" src="..."> .directive('resize-iframe', function() { return { restrict: 'A', link: function ( scope, elm, attrs ) { var container = elm.contentWindow.document.getElementById('ifrm_container'); // Iframe container. Usualy a div. function autoResize(){ ifrmNewHeight = container.offsetHeight; // New height of the document. if(ifrmNewHeight !== ifrmOldHeight) { ifrmOldHeight = ifrmNewHeight + 30; // +30 for no scrollbar. ifrm.style.height= (ifrmNewHeight + 30) + "px"; // Set iframe style. } setTimeout(autoResize, 250); } // First call of autoResize(). autoResize(); }; }); 

I tested this solution on all browsers, even IE7, and it works well, but not in the directive (some element has been changed).

THIS DIRECTIVE IS NOT TESTED