HartleySan Posted October 10, 2012 Share Posted October 10, 2012 I'm very confused about something in JS. If I use the inline onload attribute for an iframe, the onload event fires every time the iframe src attribute is changed. For example (where a.txt and b.txt are just empty text files, and the onload event fires every time either link is clicked on): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe onload</title> </head> <body> <iframe src="index.html" id="iframe" onload="alert('The iframe source changed.');"></iframe> <a href="a.txt">a.txt</a> <a href="b.txt">b.txt</a> <script> var iframe = document.getElementById('iframe'); var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function () { iframe.src = this.getAttribute('href'); return false; }; } </script> </body> </html> However, if I remove the inline onload attribute and set up an onload event handler for the iframe purely from JS (within script tags), then the onload event only fires when the page is first loaded, and not when the a.txt and b.txt links are clicked on. For example: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe onload</title> </head> <body> <iframe src="index.html" id="iframe"></iframe> <a href="a.txt">a.txt</a> <a href="b.txt">b.txt</a> <script> var iframe = document.getElementById('iframe'); iframe.onload = function () { alert('The iframe source changed.'); }; var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function () { iframe.src = this.getAttribute('href'); return false; }; } </script> </body> </html> Does anyone have any clue as to what's going on here? I would prefer to use the non-inline method for the onload event, but if it's not possible to get such a method to fire every time, then I'll just use the inline method. Thanks. Link to comment Share on other sites More sharing options...
Larry Posted October 13, 2012 Share Posted October 13, 2012 That's interesting. Does this happen in a specific browser or in all of them? What about using event bubbling to watch for clicks on links within the iframe? 1 Link to comment Share on other sites More sharing options...
HartleySan Posted October 30, 2012 Author Share Posted October 30, 2012 After researching the topic heavily (and wadding through a bunch of cruddy, inaccurate info), I finally concluded that there are two viable options: 1) Use the onload attribute directly in an HTML tag, or 2) Set up a window.onload event within the iframe script (and not the parent window script). Because I'm a big supporter of proper separation of code, I much prefer the second option. By setting up a window.onload event within the iframe script, I can get the necessary info for JS/Ajax, report it back to the main window and go on my merry way. Anyway, I imagine this post will be of little interest or use to anyone, but all the same, it might prove useful to know how to deal with iframes in JS so that Ajax-like operations can be performed, even when certain newer features are not supported in some browsers (e.g., Ajax file uploads in IE, etc.). 2 Link to comment Share on other sites More sharing options...
Edward Posted October 30, 2012 Share Posted October 30, 2012 This is useful i saw examples in the js book of where an iframe would be the appropriate solution. I and others may need this later on thanks for spending the time to share this with us. Link to comment Share on other sites More sharing options...
HartleySan Posted October 30, 2012 Author Share Posted October 30, 2012 Glad somebody found it useful. I was exaggerating a bit anyway. The truth is, it's very useful, but at the same time, probably of little concern to most people, since most people will probably just use jQuery or whatever to resolve issues that might require some Ajax-iframing. Link to comment Share on other sites More sharing options...
Edward Posted October 30, 2012 Share Posted October 30, 2012 Thanks HartleySan, hey could you help us on this thread clearing up some issues. http://www.larryullman.com/forums/index.php?/topic/1740-chapter-8-event-handling-page-298-preventing-default-behavior/ Link to comment Share on other sites More sharing options...
Jaepee Posted November 3, 2012 Share Posted November 3, 2012 Hi Everybody, I have a quick question to add to this thread regarding the onload event. I've coded the Utility script in chapter 8 of the book and was wondering if it would be a good idea or not to use the addEvent: function for the window "load" event. Example: U.addEvent(window, "load", popA); // function popA(){ alert("This is an Alert called using the Utility script"); } Would the above code make the javascript more cross-browser friendly? or will all browsers understand the basic: window.onload = function(){ alert('This alert is from onload event'); } I am just trying to clarify this concept, and any input or recommendations would be great. Thanks jp Link to comment Share on other sites More sharing options...
HartleySan Posted November 3, 2012 Author Share Posted November 3, 2012 All browsers understand the traditional event model, of which "window.onload" is an example. You can of course use Larry's utility library to accomplish the same thing; that's up to you. Although doing so won't make things any more cross-browser friendly, since both the traditional event model and Larry's utility library would offer you 100% support. Link to comment Share on other sites More sharing options...
Jaepee Posted November 3, 2012 Share Posted November 3, 2012 Thank You HartleySan for clarifying that for me. I'll use the traditional event model. Link to comment Share on other sites More sharing options...
Recommended Posts