JavaScript - Weird Problem With Onload
Some people claim that the window.onload does not fire in some browsers, under some OS, when the page is re-loaded using the back button of the browser.
The simple code is: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> onload=function(){ alert('foo') } </script> </head> <body> <a href="http://www.google.com">go Google then press the back button</a> </body> </html> Open the document, click the link, then press the Back button of the browser. Surprisingly, in FF 3.6.3 (at least) the window.onload event is not read again, thus it does not fire the function. That is a severe issue, as a lot of JavaScript codes are based on onload event. Is it a bug? Does that happen only locally (I can not test it on a server this moment)? Are there any other browsers or other browsers' versions which act in the same way? Any thoughts? Similar TutorialsHello Can anyone help with the following problem On the following page http://www.stroudskittles.co.uk/signingon.html I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker) If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems. The Chained Menu works, however the IFrame Ticker does not display. Both events ahave ben placed on the boady tag. Can anyone advise how I can get both to display in Firefox Can anyone Hi, I am learning Javascript and place the script tag in the head of my document and the code doesnt work as it loads the page. I understand that the window.onload function must call the function when the page has loaded but i cant seem to get it to work, I have wrapped my changeImage function in the onload function and it still doesnt work. where am i going wrong? I would like the script tag in the head of the document and understand how to use the window.onload function with my changeImage function. Thank you. Code: window.onload = function () { changeImage(); } var myImage = document.getElementById("image"); var imageArray = ["images/leaf.jpg","images/sky.jpg","images/tree.jpg"]; var imageIndex = 0; function changeImage() { myImage.setAttribute("src", imageArray[imageIndex]); imageIndex++; if (imageIndex >= imageArray.length) { imageIndex = 0; } }// changeImage ... end setInterval(changeImage, 3000); I wrapped the whole of the code in the function but then in the console it doesnt do the setInterval it just stops at that break point. If anyone can help me with this problem I'd be very grateful. I'm trying to set a margin onLoad based on window size. http://jimbolgs.agilityhoster.com/handmade/test.html Thanks. hi all im trying to hide a div on page load, ive used this. Code: <script type="text/javascript"> function hideDiv(){ document.getElementById('sidebar').style.display = "none"; } hideDiv() </script> and this in the body tag Code: <body onload="javascript:hideDiv()"> it works fine hiding the div named sidebar, problem comes when i try to then use an Onclick event to show the hidden div, it just wont show. can this be done? please help if you can this work has to be in soon Hello guys, I'm currently writing an web application using java servlets and javascript. Today i ran into this weird problem. The servlet sends to the client an html page which has an javascript in it and a form. Upon completion of the form and pressing the submit button the javascript does not execute(but the form is sent, function is called with the onclick tag). If i view-source this page from my browser and save it to an .html file locally the javascript function executes just fine. Any help greatly appreciated so my code is Code: function more(){ alert("You can't eat more apples then you have"); } function apple(){ var apples = prompt('How many apples do you have'); var eat = prompt('How many did you eat'); if(eat > apples){ more(); } if(eat <= apples){ var eaten = apples - eat; alert('You ate '+ eaten + ' apples!'); } } My problem is unless you enter 1 for how much did you eat, it goes to the more function. I have the following javascript function: [ function addNewWindowEvent(evType, fn) { if (window.addEventListener) { this.addEventListener("load", fn, false); return true; } else if (window.attachEvent) { var onload = "onload" this.attachEvent(onload, fn); return true; } else { return false; } } ] which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this: uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no] and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks. henryv Hello there, Problem: I was able to see problem only in IE6 Form input fields not clickable and not accepting inputs + Can't even select text or perform most right-click functions. URL: http://www.webhostingkit.com/a/cgi/p...usercontactall Was wondering if anyone can help me out with this weird problem. Not sure why, but none of the input form fields are able to accept values or even clickon them. Site displays just fine in IE, however anywhere on the site, when user tries to input, it just won't show happen, any idea on what is wrong or how to fix this? Thanks again. ** Edit ** If anyone has IE6 installed can you please test it, cuz I am thinking it might be just the standalone version of IE I have might be having the issue, as in that IE, some major sites (including yahoo.com) are having the same issues. For some reason i cant get this bit of code to work. You can ignore the php and html if its getting in your way. Thanks: Code: <div id="pl"> <? if($edit == true){ ?> <script type="text/javascript"> $("#add_playlist_form").css({display:"none"}); $("#add_playlist").click(function(){ alert($("#add_playlist").html()); if($("#add_playlist").html() == "Add a Playlist >>"){ $("#add_playlist").html("Hide <<"); $("#add_playlist_form").css({display:"block"}); } else{ $("#add_playlist").html("Add a Playlist >>"); $("#add_playlist_form").css({display:"none"}); } }); </script> <a href="#" id="add_playlist">Add a Playlist >></a> <form id="add_playlist_form" method="POST" action=" "> <input type="text" name="pl_name" class="add_playlist"/> <textarea name="pl_dsec" maxlength="200"></textarea> <input type="submit" name="submit_playlist" value="Add Playlist" class="submit_playlist"/> </form> <? } ?> <ul class="vList"> Hi, I'm looking to create a box that shows to IE6 users or lower, to tell them that my site does not render properly in the IE6 browser and that they should therefore upgrade to a newer version or alternative browser. Basically I would put whatever the code to show the box into these tags: Code: <!--[if lte IE 6]> INSERT HERE <![endif]--> to enable it to only appear to IE6 or below users. Preferably when this box appeared, it would be nice if it could fade the page behind it. Does anyone have a script for this or know of a tutorial I could use? The box would also need buttons at the bottom that said "Ok, upgrade me" (this would load another window with links to alternative browsers) or "No thanks" (or "Close") Thanks in advance. Am I saying the onload event wrong or something? PHP Code: <input type="button" value="Mouse" onload="popup_show('popup', 'popup_drag', 'popup_exit', 'mouse', -10, -10);" /> Other events like onmouseover and onClick work Hi all I would like the img src to be populated after page load I'm not sure this is doing what I would like it to do. I have done this. (tag shortened for post) Code: <img src="" id="testImg2" onload="(this.src='images/USA.jpg')"/> Is this populating the img src after page load or when the img tag is loaded? LT I have this code: Code: <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c7b22470e521876"></script> I want this JavaScript code above to be executed when all My page finished loading (maybe by using JavaScript onload) So how can I do that? Hi, I am trying to give the user the option of music on my homepage (b/c we've all found it annoying at times...perhaps most times). I have found an "onload" option for the body tag on dotnetspider.com, but it doesn't seem to be working for me. Please take a look and let me know of any improvements I could make. Thx Code: <body onload="loadMusic()"> <p> <script type="text/javascript"><!-- function loadMusic() { var r=confirm("Would you like a background tune?"); if (r==true) { <input type="button" onclick="show_confirm()" value="Show a confirm box" /> <object class="plugin_video" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="480" width="640"> <param name="autoplay" value="false" /><embed title="QuickTime" hidden="true" src="sounds/siteBG.wav" mce_src="sounds/siteBG.wav" autoplay="true" loop="true" controller="true"></embed> </object> } else { alert("If you change your mind reload the page to choose again."); // --></script> Hi everyone, I am at the last leg of getting my code to run. I have a window.onload function, but right now it is working only when I fill in all the field in the drop down list, hit a refresh and then hit submit button. What changes should I implement in the code? The code after the window.onload function runs as follows: Code: window.onload = function() { age = 0; groom_age = getvalues(); caste = 0; groom_caste = getvalues_1(); profession = 0; groom_profession = getvalues_2(); bachelor = 0; groom_bachelor = getvalues_3(); master = 0; groom_master = getvalues_4(); doc = 0; groom_doc = getvalues_5(); country = 0; groom_country = getvalues_6(); color = 0; groom_color = getvalues_7(); height = 0; groom_height = getvalues_8(); marriage = 0; groom_marriage = getvalues_9(); father = 0; groom_father = getvalues_10(); switch(groom_age) { case "23" : age = 1.6; break; case "24" : age = 1.2; break; case "25" : age = 1.7; break; case "26" : age = 1.8; break; case "27" : age = 1.9; break; case "28" : age = 1.75; break; case "29" : age = 1.7; break; case "30" : age = 1.4; break; case "31-35" : age = 1.8; break; case "36-40" : age = 1.9; break; case "41-45" : age = 1.75; break; case "46-50" : age = 1.7; break; case "51+" : age = 1.4; break; default: age = 1; } switch(groom_caste) { case "Brahmin" : caste = 1.6; break; case "Bania" : caste = 1.2; break; case "Kayastha" : caste = 1.6; break; case "Kshatriya" : caste = 2.0; break; case "Dalit" : caste = 1.8; break; case "Maravar" : caste = 1.6; break; case "Mudaliar" : caste = 2.0; break; case "Jat" : caste = 1.8; break; case "Labanas" : caste = 1.6; break; case "Rajput" : caste = 1.6; break; default : caste = 1; } switch(groom_profession) { case "Engineer" : profession = 1.6; break; case "Doctor" : profession = 1.2; break; case "Lawyer" : profession = 1.65; break; case "CA" : profession = 1.7; break; case "IAS" : profession = 2.0; break; case "Family Business" : profession = 1.5; break; case "Engineer + MBA" : profession = 1.95; break; case "None of the above" : profession = 1.95; break; default: profession = 1; } switch(groom_bachelor) { case "BTech/BE/BS" : bachelor = 1.6; break; case "MBBS" : bachelor = 1.2; break; case "BA" : bachelor = 1.1; break; case "B.Com" : bachelor = 1.4; break; case "BSc" : bachelor = 1.9; break; case "BBA" : bachelor = 1.1; break; case "Diploma" : bachelor = 1.4; break; case "Certification Course" : bachelor = 1.4; break; default: bachelor = 1; } switch(groom_master) { case "MS" : master = 1.6; break; case "MBA" : master = 1.2; break; case "MHA" : master = 1.4; break; case "MTech" : master = 1.4; break; case "M.Ed" : master = 1.4; break; case "No Master degree" : master = 1.4; break; default: master = 1; } switch(groom_doc) { case "Doctor of Philosophy (Phd)" : doc = 1.6; break; case "Doctor of Medicine (MD)" : doc = 1.2; break; case "No Doctorate Degree" : doc = 1.4; break; default: doc = 1; } switch(groom_country) { case "India" : country = 1.6; break; case "USA" : country = 1.2; break; case "Any European Country" : country = 1.7; break; case "Australia" : country = 1.7; break; case "Canada" : country = 1.7; break; case "Any Country more developed than India" : country = 1.7; break; case "Any Country less developed than India" : country = 1.2; break; default: country = 1; } switch(groom_color) { case "Fairy White" : color = 1.6; break; case "Black" : color= 1.2; break; case "Wheatish (Almost White. Would need some Fair n Lovely)" : color= 1.4; break; case "Brown": color= 1.4; break; case "White": color= 1.9; break; case "Pitch Black (Not visible on a moonless night)" : color= 0.6; break; default: color = 1; } switch(groom_height) { case 'Less than 5\'4"' : height = 1.6; break; case '5\'4"' : height = 1.2; break; case '5\'5"' : height = 0.8; break; case '5\'6"' : height = 1.0; break; case '5\'7"' : height = 1.4; break; case '5\'8"' : height = 1.5; break; case '5\'9"' : height = 1.6; break; case '5\'10"' : height = 1.7; break; case '5\'11"' : height = 1.8; break; case '6' : height = 1.85; break; case '6\'1"' : height = 1.9; break; case 'Greater than 6\'1"' : height = 1.8; break; default: height = 1; } switch(groom_marriage) { case "0" : marriage = 1.6; break; case "1" : marriage = 1.2; break; case "2" : marriage = 0.4; break; case "More than 2" : marriage = 0.2; break; default: marriage = 1; } switch(groom_father) { case "Doctor" : father= 1.6; break; case "IAS" : father = 1.2; break; case "Engineer" : father= 1.7; break; case "Lawyer" : father= 1.65; break; case "CA" : father= 1.8; break; case "Engineer + MBA" : father= 1.9; break; case "Family Business" : father= 1.2; break; default : father = 1; } }; function processOrder() { var total = age + caste + bachelor + master + doc + color + profession + father + marriage + height + country; var pageNumber = Math.floor((20 - total) / 2 + 1); // pageNumber = 6; // alert(pageNumber); window.open ("Page " + pageNumber + ".html"); } </script> <center> <INPUT TYPE="button" VALUE="Calculate" onClick="processOrder()"> </center> I would really appreciate any kind of help. Thanks a lot! hi guys, how can i get this code to load on body onload? without fading in and out? Code: <html> <head> <!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally --> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function() { $("#responsecontainer").load("response.php"); var refreshId = setInterval(function() { $("#responsecontainer").load('response.php?randval='+ Math.random()); }, 9000); $.ajaxSetup({ cache: false }); }); </script> </head> <body> <div id="responsecontainer"> </div> </body> Thanks I am using this code Code: <BODY onload="window.top.location='http://localtimes.info/clock.php?cp3_Hex=0F0200&cp2_Hex=FFFFFF&cp1_Hex=000080&fwdt=118&ham=0&hbg=0&hfg=0&sid=&mon=&wek=&wkf=&sep=&continent=Asia&country=Indonesia&city=Jakarta&widget_number=116'"> but the problem is that when the page containing this code loads, it redirects Me to the page (a new page) of the JavaScript code, So how to make this JavaScript code load on the same page and not redirecting Me to a New page? (and make it load when the all page finish loading) I have a popup window that calls a texteditor. I want the texteditor to show the inner HTML of the parent doucument by div id. When I call the function through a submit (in child window) it workks great, but I want innerHTML to be added when child page loads. I have tried calling function in body onLoad=getparent; tries adding it to inner script where it calls the editor , again onLoad=getparent; Tried with and without () i.e onLoad=getparent(); Child window code: [code] <html> <head> <title>Mangae Content</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> <script language="javascript"> function getparent() { var TextToPass = window.opener.document.getElementById('missionStatement'); var TextToEdit = TextToPass.innerHTML; document.getElementById('editor1').value=TextToEdit; } </script> </head> <body> <form method="post" name="editedcontent"> <p> My Editor:<br /> <textarea name="editor1" id="editor1"></textarea> <script type="text/javascript"> onload=getparent; CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" onClick="getparent();"/> </p> </form> </body> </html> [code] When I use the submit button it works fine. Captures parent window HTML and loads it into ckeditor, How do I get it to load without using the submit button??? Any help would be greatly appreciated. Hi, I got some JavaScript code from the net to resize DIV's depending on the window-size. It works perfectly in FF, but it won't work in IE. Code: function Resize(){ var winW = 630, winH = 460; if (parseInt(navigator.appVersion)>3) { if (navigator.appName=="Netscape") { winW = window.innerWidth-30; winH = window.innerHeight-200; } if (navigator.appName.indexOf("Microsoft")!=-1) { winW = document.body.offsetWidth-30; winH = document.body.offsetHeight-200; } } var topHeight = document.getElementById('top').offsetHeight; var setHeight = document.getElementById('settings').offsetHeight; var headersHeight = document.getElementById('headers').offsetHeight; var leftWidth = document.getElementById('left_column').offsetWidth; document.getElementById('container').style.width=winW+"px"; document.getElementById('container').style.height=(winH-topHeight-setHeight)+"px"; document.getElementById('headers').style.width=(winW-leftWidth)+"px"; document.getElementById('data').style.width=(winW-leftWidth)+"px"; document.getElementById('data').style.height=(winH-topHeight-setHeight-headersHeight)+"px"; } I've been working on this for some days. I would appreciate any help I can get. Erik Hi, I'm working on a small bit of code that passes a logged in users email address and name to a live chat form (Zompim & WHMCS) http://api.zopim.com/#setName By striping the code from the above page, I've managed to get it to work when the link is clicked, but I needed to have the variables passed upon page load. If anyone can point me in the right direction that would be great, me and Javascript don't work too well together! Here is what I have so far http://myautodj.com/zomp_test.php (your request a chat, and click on the run script link - that passes the demo email and name) Here is the code Code: <pre><script> $zopim.livechat.set({ language: 'en', name: 'Visitor', email: 'visitor@site.com', onStatus: function(s) { alert(s) } }); </script></pre> <script> (function() { var pres = document.getElementsByTagName('pre'), i; for (i=0; i<pres.length; i++) { buildLiveExample(pres[i]); } function buildLiveExample(p) { var code = p.innerHTML.replace(/>/g, '>').replace(/</g, '<'); var div = document.createElement('div'); if (code.search('<script>') == 0) { var a = document.createElement('a'); a.innerHTML = 'run script'; a.href = '#'; a.onclick = function() { eval(code.replace(/<\/?script>/g, '')); return false; }; div.appendChild(a); } else { div.innerHTML = code.replace(/<script>[\s\S]*?<\/script>/g, '') var code_blocks = code.match(/<script>[\s\S]*?<\/script>/g); if (code_blocks) { for (var i=0; i<code_blocks.length; i++) eval(code_blocks[i].replace(/<\/?script>/g, '')); } } p.parentNode.insertBefore(div, p); } })() </script> <script type="text/javascript"> document.write(unescape("%3Cscript src='" + document.location.protocol + "//zopim.com/?4vXfkefMFbxeWAVPjvRvWnBodfrGzctq' charset='utf-8' type='text/javascript'%3E%3C/script%3E")); </script> |