Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: Iframe onload event only after an anchor onclick

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default Iframe onload event only after an anchor onclick

    Sample code:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe name="iframe_a" onload="alert('Thanks for the visit!');"></iframe>
    <a href="http://www.example.com/" target="iframe_a">Go!</a>
    </body>
    </html>
    I'd like to see the alert message after clicking on the link and when the iframe finishes loading. But now it appears on the initial page load, too. How can I achieve it?
    Last edited by Rain Lover; 10-15-2012 at 10:10 AM.

  2. #2
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Referencing a function
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function on_iframe_load() {
    	document.getElementById('iframe_a').onload = function() {
    		alert('Thanks for the visit!');
    	};
    }
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load()">Go!</a>
    </body>
    </html>
    or

    Inline
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" onclick="document.getElementById('iframe_a').onload = function() {alert('Thanks for the visit!');};">Go!</a>
    </body>
    </html>
    Last edited by keyboard; 10-14-2012 at 06:26 AM. Reason: Added second option

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    The reason it appears on the initial page load, is it triggers the alert once the iframe loads when the page first loads. I've made you a jsfiddle to demonstrate what you want:
    http://jsfiddle.net/bernie1227/ssNUA/1/
    Last edited by bernie1227; 10-14-2012 at 07:54 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #4
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by keyboard1333 View Post
    Referencing a function
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function on_iframe_load() {
    	document.getElementById('iframe_a').onload = function() {
    		alert('Thanks for the visit!');
    	};
    }
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" onclick="on_iframe_load()">Go!</a>
    </body>
    </html>
    Thanks for the answer, but it doesn't work in IE8.

  5. #5
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Give this a try -

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript">
    $(window).load(function() {
    	$('#iframe_trigger').click(function() {
    		$('#iframe_a').load(function() {
    			alert('Thanks for the visit!');
    		}); 
    	});
    });
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" id="iframe_trigger">Go!</a>
    </body>
    </html>

  6. #6
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by keyboard1333 View Post
    Give this a try -

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript">
    $(window).load(function() {
    	$('#iframe_trigger').click(function() {
    		$('#iframe_a').load(function() {
    			alert('Thanks for the visit!');
    		}); 
    	});
    });
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" id="iframe_trigger">Go!</a>
    </body>
    </html>
    Same result -- IE is a pain! I don't know why but the following seems to work:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <iframe id="iframe_a" name="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a" onclick="say();">Go!</a>
    <script type="text/javascript">
    function say() {
    document.getElementById('iframe_a').setAttribute("onload", "alert('Thanks for the visit!')");
    }
    </script>
    </body>
    </html>

  7. #7
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by Rain Lover View Post
    but it doesn't work in IE8.
    did you take a look at my jsfiddle? It should work in ie8.

    Edit:
    crosspost again: if you've got it sorted:
    If this thread is finished, please set it to resolved.
    You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.
    Last edited by bernie1227; 10-14-2012 at 08:03 AM.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    function on_iframe_load(){
    	var frame = document.getElementById('iframe_a');
    	if (window.addEventListener){
    		frame.removeEventListener('load', on_iframe_load.loadfunc, false);
    		frame.addEventListener('load', on_iframe_load.loadfunc, false);
    	}
    	else if (window.attachEvent){
    		frame.detachEvent('onload', on_iframe_load.loadfunc);
    		frame.attachEvent('onload', on_iframe_load.loadfunc);
    	}
    }
    on_iframe_load.loadfunc = function() {
    	alert('Thanks for the visit!');
    };
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.dynamicdrive.com/" target="iframe_a" onclick="on_iframe_load(); return true;">Go!</a>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by bernie1227 View Post
    did you take a look at my jsfiddle? It should work in ie8.
    Yes, and thanks for the example! But to tell the truth I don't know how to include your code in my sample code.

  10. #10
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,531
    Thanks
    41
    Thanked 89 Times in 88 Posts
    Blog Entries
    3

    Default

    Here's bernie's code combined with yours -
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    window.onload = function() {
    	var iframe = document.getElementById("iframe_a");
    	var onload = iframe.onload;
    	if (typeof iframe.onload != 'function') {
     		iframe.onload = alert_change;
    	} else {
     	   	window.onload = function() {
         	  		onload();
          	   		alert_change();
    		}
    	}    
    };   
    function alert_change() {
       alert("thanks for visiting!");
    }
    </script>
    </head>
    <body>
    <iframe name="iframe_a" id="iframe_a"></iframe>
    <a href="http://www.example.com/" target="iframe_a">Go!</a>
    </body>
    </html>
    But jscheuer's code should work just fine.

    edit -
    Bernie, I deleted your post as you edited it to contain exactly the same code as mine (it was pointless)
    Last edited by keyboard; 10-14-2012 at 08:42 AM.

Similar Threads

  1. Modal onload event?
    By mdh in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-29-2009, 07:21 PM
  2. Onclick event -> onload event
    By Goodboy in forum JavaScript
    Replies: 0
    Last Post: 08-31-2009, 02:30 PM
  3. Jump to anchor tag onload
    By bigalo in forum JavaScript
    Replies: 2
    Last Post: 08-14-2009, 03:11 PM
  4. Use different tag for onload event
    By mandarin in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-06-2009, 05:40 AM
  5. Onload versus onclick event handler
    By CzechBoy in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 02-28-2007, 11:44 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •