How to add onbeforeonload to Iframe? (dynamic iframe height)

zipz

unread,

Dec 23, 2011, 7:31:28 AM12/23/11

to MooTools Users

I need help to add the new html5 event onbeforeonload to an Iframe
element.
http://www.w3schools.com/html5/html5_ref_eventattributes.asp

I'm going to do a iframe that dynamically changes the height after
different content. Everything will be in same domain. Right now I have
the problem that the height is increased but never decreased as the
new document is loaded with at least same height as the previous
document. In other words the new documents body is filled with non
content to fill up all the height in the iframe.

As an example, first load a page with very small content, then click
on a link at that page which give some content which requires a big
height (like height 2000px). The iframe should now increase the height
to match the new content. Now again click on a link back to the small
content. This small content will now get a height of 2000px (if your
longer content had 2000px).

My plans was to add a n onBeforeOnLoad event and resize the iframe
back to zero to be able to add new correct height or maybe someone has
another better solution?

I don't know if this could be added to jsfiddle.net?

My iframeLoading.js class looks like this

var IFrameContentUpdate = new Class({
Implements: Options,
options: {
},

/*
*element = the element to load the iframe in
*src = the address to the source to load
*id = the id of the iframe object
*options for future changes
*/
initialize: function(element, src, id, options){
this.setOptions(options);
this.id = id;
this.iframeElement = new IFrame({
src: src,
styles: {
width: '100%',
border: '0px',
'y-overflow': 'hidden'
},
id: id,
events: {
load: function(){
this.setIframeHeight();
}.bind(this),
}
}).inject(element);
},
setIframeHeight: function() {
var innerDoc = (this.iframeElement.contentDocument) ?
this.iframeElement.contentDocument :
this.iframeElement.contentWindow.document;
var h = innerDoc.body.scrollHeight;
this.iframeElement.setStyle("height", h);
}
});

HTML file looks like this
<html>
<head>
<title>Iframe Content</title>
<script src="../../scripts/mootools-1.4.1-core-nc.js" type="text/
javaScript"></script>
<script src="../../scripts/iframeLoading.js" type="text/javaScript"></
script>
<script type="text/javascript">
window.addEvent('domready', function() {
var iframe = new IFrameContentUpdate($('iframeContent'),
'some_file_to_load_in_iframe.html', 'iframeElementId');
});
</script>
</head>
<body>
<div id="iframeContent" Style="height:100%;">
</div>
</body>
</html>

zipz

unread,

Jan 1, 2012, 2:24:31 PM1/1/12

to MooTools Users

Can someone help me with this problem?

Aaron Newton

unread,

Jan 2, 2012, 2:01:44 PM1/2/12

to mootool...@googlegroups.com

1) you should put this in jsfiddle.net so that we can play with it.

2) you should do some debugging; what are the height values you get? is the issue that once the frame size is increased that it doesn't matter if the content is shorter but instead that the document says it's as high as the frame? where is the error? is it in your measuring or in your loading code? Add some console statements and figure out what isn't working.

zipz

unread,

Jan 3, 2012, 3:12:02 AM1/3/12

to MooTools Users

I've tried to put this in jsfiddle but I can't find any good content
from same domain that have different lengths contains links to other
content. Content from different domains will not work, see example 3
below. The goal is to get example 4, see below, to work.

Example 1:
http://fiddle.jshell.net/T7T4E/

Example 2:
http://fiddle.jshell.net/T7T4E/1/

Example 3:
Different domains
http://fiddle.jshell.net/T7T4E/2/
Give: Unsafe JavaScript attempt to access frame with URL http://doc.jsfiddle.net/
from frame with URL http://fiddle.jshell.net/T7T4E/2/show/. Domains,
protocols and ports must match.
/T7T4E/2/show/:52Uncaught TypeError: Cannot read property 'body' of
undefined

Example 4:
From my own domain
http://www.elveron.com/elveron/game/classic3/globalcouncil.jsp
Do like this, first click on Game Talk and Questions
to load a longer content. Then click on the Forum link at the top to
go back to the previous content. The new content will now be filled
with a lot of green that I don't want.

zipz

unread,

Jan 15, 2012, 5:30:35 PM1/15/12

to MooTools Users

Isn't there anyone who can help me with this?

Aaron Newton

unread,

Jan 15, 2012, 7:50:47 PM1/15/12

to mootool...@googlegroups.com

The lack of response probably means that no one here has a good answer for you, not that we aren't interested in helping. There are other resources on the web though; have you tried StackOverflow for example?

zipz

unread,

Jan 30, 2012, 12:02:34 PM1/30/12

to MooTools Users

I've finally found a solution to my problem.

setIframeHeight: function() {
var innerDoc = (this.iframeElement.contentDocument) ?
this.iframeElement.contentDocument :
this.iframeElement.contentWindow.document;
var h = innerDoc.body.scrollHeight;
this.iframeElement.setStyle("height", h);
}

should change to

setIframeHeight: function() {
this.iframeElement.setStyle("height", 1px); //new line
added

var innerDoc = (this.iframeElement.contentDocument) ?
this.iframeElement.contentDocument :
this.iframeElement.contentWindow.document;
var h = innerDoc.body.scrollHeight;
this.iframeElement.setStyle("height", h);
}

This is not a solution to the onbeforeonload event problem but a
solution to the dynamic iframe problem.

Philip Thompson

unread,

Jan 30, 2012, 12:30:19 PM1/30/12

to mootool...@googlegroups.com

On Mon, Jan 30, 2012 at 11:02 AM, zipz <anders....@gmail.com> wrote:

var innerDoc = (this.iframeElement.contentDocument) ?
this.iframeElement.contentDocument :
this.iframeElement.contentWindow.document;

var innerDoc = this.iframeElement.contentDocument || this.iframeElement.contentWindow.document;

Happy coding,

~Philip

--
http://lonestarlightandsound.com/

Reply all

Reply to author

Forward