javascript - Resizing a src iframe when its document has loaded? -

javascript - Resizing a src iframe when its document has loaded? -

we're embedding phpbb within our website , embedding work nicely adjust height of iframe phpbb loaded. code below works not perfectly. when content of frame re-loaded (by click in it), awaits .load() rather .ready() launch resizing event shows short delay. notice when scroll downwards page in illustration , click move page (say, select forum).

we've tried using $('frame').ready() doesn't work @ all.

any ideas remedy this? please don't suggest re-create content of iframe or such thing. thanks.

function resize_iframes() { if ($('iframe').length < 1) return; // set specific variable represent iframe tags. var iframes = document.getelementsbytagname('iframe'); // resize heights. function iresize() { // iterate through iframes in page. (var = 0, j = iframes.length; < j; i++) { // set inline style equal body height of iframed content. iframes[i].style.height = iframes[i].contentwindow.document.body.offsetheight + 'px'; } } // check if browser safari or opera. if ($.browser.safari || $.browser.opera) { // start timer when loaded. $('iframe').load(function() { settimeout(iresize, 0); }); } else { // other browsers. $('iframe').load(function() { // set inline style equal body height of iframed content. seek { this.style.height = this.contentwindow.document.body.offsetheight + 'px'; } catch(err) { } }); } }

update please note it's possible quicker proper resize altering code within the itself, adding along lines of:

window.settimeout( function(){ // resize frame we're in before it's loaded (images...) var iframes = parent.document.getelementsbytagname('iframe'); iframes[0].style.height = iframes[0].contentwindow.document.body.offsetheight + 'px'; }, 10 );

somewhere in script itself. while solve our problem, doesn't reply question presented it's left open meanwhile in case solution found , should shared public. :)

the <iframe> not have event similiar jquery.ready(). accomplish have trigger event yourself. include script on subpages:

var $ = window.parent.jquery; $(document).ready( function(){ var iframe = window.frameelement; $(iframe).trigger("ready"); });

then on page iframe, can hear ready event this:

$("iframe").on("ready", function(){ //iframe ready });

javascript jquery html iframe