Iframe attach event listener

JavaScript
1

Inline scripting makes this easy but I’m getting Typeof MissMatch error when I use Unobtrusive script and I think it’s because of the diffrence between DOM and DHTML. Any advice Greatly appreciated.

INLINE:


<iframe id="display" name="display" marginwidth="0" marginheight="0" onload="alert(display.document.title);"<!--WORKS-->
scrolling="auto" src="artical.html">Sorry, your browser does not suport inline frames!</iframe>

This alerts the title of the document loaded every time a document is loaded to ‘display’ frame.

Unobtrusive attach event listner/external js.


function addEvent(el, eType, fn, uC) {
if (el.addEventListener) {
el.addEventListener(eType, fn, uC);
return true;
} else if (el.attachEvent) {
return el.attachEvent('on' + eType, fn);
}
}

addEvent(
document.getElementById('display'),'load',[B][COLOR="Red"]alert(display.document.title),[/COLOR][/B]false);

This writen in the js of the index.html containing the IFRAME ‘display’ runs once imediatley on load then imediatley after throws ‘typeof mismatch’ error.
Wierd science::nono:

2

The problem is, you can’t pass a function that will need arguments. If you follow the function name with parenthesis (), you end up calling the function, and passing the return value of it.

The solution is to wrap it in another function. Here I do that with an anonymous function.


var display = document.getElementById('display');
addEvent(display, 'load', function() {
    alert(display.document.title);
}, false);



//if that looks weird, this is the same
var display = document.getElementById('display');
function wrapped() {
    alert(display.document.title);
}
addEvent(display, 'load', wrapped, false);
3

crmalibu
Thanks for your response, I will check it out imediatley and then post it’s result.

4

crmalibu
Unfortunatley the later script is returning the title of the index page every time ‘display’ window is loaded and I want the title of the document in ‘display’.:frowning:
So does the first one.:frowning:

5

I also notice that when I change ‘load’ to ‘reload’ nothing happens. ;(

6

Try
window.frames[“display”].document.title

More info
http://www.dyn-web.com/tutorials/iframes/

7

I’m sorry, I don’t work with iframes often and assumed they had an onload event like script and image(and it doesn’t). I googled a bit and it looks like this is a messy thing to do if you need it cross browser.

8

crmalibu
They do have an onload function as is clearly demnstrated Inline


<iframe id="display" name="display" marginwidth="0" marginheight="0"
onload="alert(display.document.title);"
scrolling="auto" src="artical.html">Sorry, your browser does not suport inline frames!</iframe>

Which works correctly every time.:eek: Unobtrusivley it dosen’t.
I realy want to get the untitled document to set image[0].style.height=100%
from the index page.:rolleyes: An if {display.document.title=" ";
then image[0].style.height=100%:shifty:

MIGHT BE DISPLAY.SRC.DOCUMENT.TITLE?

9

crmalibu

Thank you so much for your attention. This works and if you look you’ll see I refrenced the display.document again because it would spit out error ‘object required’ without it.:cool:


addEvent(document.getElementById('display'),'load',function() { if(display.document.title == '')
display.document.images[0].style.height="100%";},false);

Every one should know this technique. ;):slight_smile:
I managed this with a lot of help from mitya at Webdeveloper.com posted as ‘Iframe addevent listner’. Muchos Mas Gracias mitya felix anyo nuevo!!!