JavaScript - Reload/refresh On Browser Button Back
Hello,
I need some script to force the browser to reload/refresh when a page is reached from the back button. EG You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload. Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum). Any JS solution that will trigger a reload on browser back is appreciated. I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe. Thanks. Similar TutorialsHi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that. If anyone can help please reply, thank you. Sorry if this is the wrong place for this question, but... I'm having an issue with the difference in behavior between the IE and FF back buttons. I'm using jQuery to create collapsable div regions which contain text boxes on a search form. After submit, if the use clicks the back button in FF, the region(s) the user had previously expanded, show as expanded. Also, there search term is still present. In IE, when clicking the back button, all regions are collapsed, in there original loaded state, but the search term is still saved. I put the following code at the top of the page: onload=function(){ alert('Onload!'); } When clicking the back button in FF, nothing happens. For IE, the alert pops up. This tells me that IE reloads the page (but somehow still saves some things, like the search text). My question is, is there a way to keep IE from reloading when the use clicks 'back'? I will be creating my own 'edit' back button for users to get around this, but I also would like to prevent this from confusing users and causing undesired results. Any help would be greatly appreciated. Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame) { frames[0].location = frame+'.html' frame.contentWindow.location.replace(newUrl); } Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div> <div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div> <div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div> and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> Hi Everyone, I want to create some web pages in asp.net on which I want to avoid the user to refresh the page. I have disabled the refresh options using key board event which are as follows: 1) F5 2) Ctrl + F5 3) Ctrl + R But I want to avoid user clicking on the Refresh Button of the browser. So please help me how can we disable the Browser Refresh button/menu using Javascript ? Thanks & regards, Anthony D'souza. I am very inexperienced with javasciprt. I am designing a form in coldfusion, and want some dynamic action to take place. My users will be offered 2 selections via radio buttons. Depending on which radio button they select, they will get a few more radio buttons to choose from. I have been told that this can be handled in javascript. So I am appealing to the javascript programmer nation for some assistance in this endeavor. Any help would be greatly appreciated, Thanks. Hello Everyone, I am having trouble with a script that displays the url of an iframe. On this page, I have a single iframe and want to display the url of the iframe in a div. It works upon initial loading, but the url does not change when a link within the iframe is clicked and a new iframe page loads within the frame. My users need the ability to determine and directly link/view the iframe url. Here is the script Code: <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400" src="whats_new.htm"></iframe> <p> <div class="footer"><script type="text/javascript" language="JavaScript"> <!--document.write('<input type="text" style="width:100%; " ');--> document.write( document.getElementById('mainFrame').src); </script> </div> I am a js novice and trying to figure out what to research and implement. Can you reload the content in the div? do I want to look at cross-frame scripting? Any help would be greatly appreciated. Best regards, Eiger Is there a difference between right clicking an iframe and reloading post reponse vs. using javascript to reload the frame? So far, the javascript route hasn't worked for me. [some context] I am writing a little bookmarklet to help me with the online registrations at my school. Here is the setup. Load up a page on the domain. Remove all body elements. Insert an iframe. Set iframe to page for class roster search. (in iframe on school search page) Select class search options, POST the form data, and view results in frame. *This works perfectly, but I need to have it refresh results every minute or so. When I use frame.contentDocument.location.reload(true); the frame loses the post data or something and the page is broken. BUT when I just right click on the frame and select "reload frame" it works perfectly. Whats the deal here? What is the difference between rightclicking the frame and refreshing it like that vs. using javascript to reload the frame? PS: using chrome Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code: <SCRIPT LANGUAGE="JavaScript"> var Tborder = .05 var howmanyIMG = 15 var winHeight = Math.floor(window.innerHeight); var winWidth = Math.floor(window.innerWidth); var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3); var BoxWidth = BoxHeight; var howmanyx = Math.floor(winWidth / BoxWidth) + 1; var howmanyy = 3; var HowMany = howmanyx * howmanyy; var used = new Array(howmanyIMG); var CMYG = ["00AEEF","EC008C","FFF200","41AD49"] function RNDy(numby){ return Math.floor(Math.random()*numby); } function getUniq(){ /* alert("run getuniq");*/ var n; while ( used[ n = RNDy(howmanyIMG) ] ){} used[ n ] = true; return n; } function ColorRND() { if (RNDy(4) ==1) { return true; }else{ return false; } } function PlacePop (HMx,HMy){ var counter = 0; var countc = 0; for(x=0;x<=HMx;x++){ var countr = 0; for(y=0;y<HMy;y++){ var divy = document.createElement("div"); var divyID = 'box' + counter; divy.setAttribute('id', divyID) divy.style.position="absolute"; divy.style.zIndex = counter + 3; divy.style.visibility = 'visible'; divy.style.borderWidth = '1'; divy.style.borderColor = '#000000'; divy.style.pixelLeft= x * BoxWidth + (2 * countc); divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr); divy.style.pixelWidth= BoxWidth; divy.style.pixelHeight= BoxHeight; if (ColorRND()){ /*divy.innerHTML = 'color';*/ divy.style.backgroundColor = "#" + CMYG[RNDy(4)]; }else{ /*divy.innerHTML = 'image';*/ divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)"; divy.style.backgroundPosition = "center"; /*RNDy(100) + "% " + RNDy(100) + "%";*/ } document.body.appendChild(divy); counter++; countr++; }countc++; } /* alert("ran" + counter + " times");*/ } /* used = null;*/ </script> THANKS FOR ANY HELP YOU CAN GIVE! Hi I am generating a report on submit click.Due to size of data query execution takes some time to display result, in mean time if user press reload button on browser toolbar consequently same query request going to database and the performance become slow down. I am able to restrict user from clicking F5 and ctrl+R button but not reload button. I there any way to handle event on reload button? or can we disable reload button on submit? Thanks in advance! this function seems to be working fine in all browser but of course. I'm still a noob at JavaScript and well things like this just doesn't make sense. when I go to alert this function in IE I get undefined. But other browser gives me a value. What am I doing wrong with this function? Code: function ext() { var img = document.getElementById('photoSmall'); img = img.src; if (typeof img == 'string' && img != 'undefined') { var typeis = img.substr(-4); if (typeis == '.png' || '.jpg' || '.gif') { return typeis; } } } Thanks Jon W i have the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location? this script is generated from easypano tourweaver - Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Virtual Tour Created By CAPITA SYMONDS</title> </head> <body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0"> <script type="text/javascript" src="swfobject.js"></script> <div id="flashcontent"> To view virtual tour properly, Flash Player 9.0.28 or later version is needed. Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer. </div> <script type="text/javascript"> // <![CDATA[ var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF"); so.addParam("allowNetworking", "all"); so.addParam("allowScriptAccess", "always"); so.addParam("allowFullScreen", "true"); so.addParam("scale", "noscale"); //<!-%% Share Mode %%-> so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg"); so.addVariable("lwBgColor", "255,255,255,255"); so.addVariable("lwBarBgColor", "255,186,186,186"); so.addVariable("lwBarColor", "255,153,0,0"); so.addVariable("lwBarBounds", "-512,-384,1024,768"); so.addVariable("lwlocation", "4"); so.addVariable("lwShowLoadingPercent", "false"); so.addVariable("lwTextColor", "255,0,0,0"); so.addVariable("iniFile", "config_2_Area_Multipix.bin"); so.addVariable("progressType", "1"); so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf"); so.addVariable("href", location.href); so.write("flashcontent"); // ]]> </script> </body> </html> here is the button code - Code: <span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span> I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript. When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page. I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good. Thank In my application I want user to take an "Exit Survey"(Independent website) when he is leaving the application. As name explains, It should happen only when user closes current browser tab or browser window. Its possible using JavaScript OnUnload event. But the problem is that this event occurs on 1. close of browser tab 2. close of browser window 3. click of any internal page link(i.e anchors and form buttons) 4. click of browser's Refresh button 5. click of browser's Back/Forward button I have handled first 3 cases but not able to detect Refresh and Back/Forward button click. Has anybody of you implemented such functionality?? Thanks in advance!!! I have a website using this pageslide function http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? Hi, I have the following problem: When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not. Code: <script type="text/javascript" type="text/javascript"> window.onbeforeunload = confirmExit; function confirmExit() { return "blabla"; } </script> How you handle back button scenario in firefox browser. The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache. It works in IE.. Why my checkbox remain checked even i refresh my browser ?
Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to? Thanks in advance for any help given. Code: var RecoverScroll= { timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0, init:function(pageName) { var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont(); if( document.documentElement ) this.dataCode=3; else if( document.body && typeof document.body.scrollTop!='undefined' ) this.dataCode=2; else if( typeof window.pageXOffset!='undefined' ) this.dataCode=1; if(pageName) this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_'); this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() }); if(window.location.hash == "" && (offsetData=this.readCookie(this.cookieId)) != "" && (offsetData=offsetData.split('|')).length == 4 && !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3]))) { if(!!window.SoftScroll && SoftScroll.scrollTo) { SoftScroll.init(); SoftScroll.scrollTo(sx, sy); } else window.scrollTo(sx, sy); } this.record(); }, reset:function() { clearTimeout(this.timer); this.timer=setTimeout(function(){RecoverScroll.record();}, 50); }, record:function() { var cStr; this.getScrollData(); this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y); }, setTempCookie:function(cName, cValue) { document.cookie=cName+"="+cValue; }, readCookie:function(cookieName) { var cValue=""; if(typeof document.cookie!='undefined') cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : ""; return this.bon?cValue:""; }, getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/) { switch( this.dataCode ) { case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop); break; case 2 : this.x=document.body.scrollLeft; this.y=document.body.scrollTop; break; case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break; } }, addToHandler:function(obj, evt, func) { if(obj[evt]) { obj[evt]=function(f,g) { return function() { f.apply(this,arguments); return g.apply(this,arguments); }; }(func, obj[evt]); } else obj[evt]=func; }, sf:function( str ) { return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;}); }, cont:function() { var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data); } } |