Back button does not work as expected after a refresh

Question

I'm asking this question again because this question is no longer in my question list and I have an answer that works. More than 100 people viewed this question before it disappeared with no comment or answer.

I'm working in a Windows, Apache/mod_perl, dHTML (HTML, CSS, JavaScript, Perl) environment. I'm working on an application that should work in the Chrome, Edge, FF, IE, and Opera browsers. The problem I describe following works as expected in FF and IE. It does not work as expected in Chrome, Edge, or Opera.

I've built a web page with up to 6 iframes for showing the 5 most recent years of color maps of Kentucky counties for a measure. Each iframe has many links. If I take 3 links, for example, in one or any combination of iframes and enter Refresh, the web page is returned to its initial state. At this point, if I enter Back, I would expect to leave the page.

But this does not happen. To leave the page I have to enter Back n+1 times where n is the number of links I've taken. And each Back entry simply causes the composite web page to blink until I leave the page.

The link below will show you this problem. It is executing off a server at my home in Kentucky. Enter any 3 links, refresh, and try to back out.

http://steepusa.no-ip.info/scx/gencm1m.cgi?str=0~SKY~healthybirths!v~l

Nothing in the Refresh process is under my programs control. The user is just entering the browser Refresh button. Its like the history of the composite webpage has been erased, but the count of history entries did not get zeroed. It does not step back through the history of links taken.

This cannot be correct. It makes no sense to me. This is the only outstanding cross browser issue I have in finishing this application. To see the web page work as intended and expected, try the link in FF or IE. Any Help will be appreciated.

craigt

Answer 1

First, before giving my answer, I think this problem should be answered in browser code. In all the presentation pages in my application, when I Refresh and then enter the Back button, I leave the page. I think this multiple iframe page should work the same way. And there is a thread (#2944) on Github involving representatives from the major browsers, opened in 2017 and updated about a dozen days ago, about exposing the history.index. They are aware of the routing difficulties with pages with multiple iframes and are looking for some way to help developers.

The html is 4 links as follows.

{

 <A ID='delnkSetID1' CLASS='lnk3' STYLE='POSITION:absolute;TOP:260px;LEFT:133px;'           
 TITLE='Back In History' ONMOUSEOVER=\"setStatus(' ');\" ONMOUSEOUT=\"setStatus(' 
 ');\" ONCLICK='doHstry2(\"B\");'>Back</A>

 <A ID='delnkSetID2' CLASS='lnk3' STYLE='POSITION:absolute;TOP:260px;LEFT:193px;' 
 TITLE='Forward In History' ONMOUSEOVER=\"setStatus(' ');\" ONMOUSEOUT=\"setStatus(' 
 ');\" ONCLICK='doHstry2(\"F\");'>Forward</A>

 <A ID='delnkSetID3' CLASS='lnk3' STYLE='POSITION:absolute;TOP:260px;LEFT:273px;' 
 TITLE='Refresh To The Initial State' ONMOUSEOVER=\"setStatus(' ');\" 
 ONMOUSEOUT=\"setStatus(' ');\" ONCLICK='doRfrsh();'>Refresh</A>

 <A ID='delnkSetID4' CLASS='lnk3' STYLE='POSITION:absolute;TOP:260px;LEFT:348px;' 
 TITLE='Leaave The Page' ONMOUSEOVER=\"setStatus(' ');\" ONMOUSEOUT=\"setStatus(' 
 ');\" ONCLICK='doHstry2(\"L\");'>Leave</A>

}

The JavaScript follows.

}     

       var hPosCntIndx = 0; // 'Current' position in the history object.
       var lstHstLen; // 'Last' history length.
       var stpsInStrt; // Initial history length depending on the call origin.


       var str = \"$fromwhr\"; // Where from indicator.
       if (str.substring(0,1) == 0) { // Special views.
         lstHstLen = 5; // Its a refresh.  Set these back to there original entry history length.
         stpsInStrt = 5;
       } else { // Measure exploration.
          lstHstLen = 4;
          stpsInStrt = 4;
         }


       function doHstry2(op) { // Facilitate exit from a multiple iframe page.

         if (history.length != lstHstLen) { // History length has increased since the last time in.
           hPosCntIndx = 0; // Reset the top (equal to 0) of history index.
         }

         switch(op) { // Do the operation requested.
           case 'L': // Leave the page.
             var nBck = history.length - stpsInStrt + hPosCntIndx + 1; // Composite history - hitory count at entry + position count relative to the 'top' of history + 1.
             history.go(-nBck);
             break;
           case 'B': // Back 1 in history.
             hPosCntIndx--;
             history.go(-1);
             break;
           case 'F': // Forward 1 in history.
             if ( hPosCntIndx + 1 <= 0 ) { // The zero position is the top of the history stack.
               hPosCntIndx++;
               history.go(+1);
             }
         }

         lstHstLen = history.length; // Capture the 'current' history length.

       }

       function doRfrsh() {
         this.location.href = \"gencm.cgi?str=$params$svdp\";
       }

}

This approach initially sets a global history object position indicator to 0, the last history entry, and a global 'last' history length and history length at initial entry.

After function entry, I begin by checking to see if history has increased (changed). If it has, I reset the position indicator to the 'TOP' of history.

Then I process a switch by operation. Forward and Back blocks increment (if not at the top) and decrement the position index, and both take the appropriate forward or back step.

The refresh assigns the entry URL to this.location.href. The Leave block computes the number of entries to skip over to get out. The calculation substracts the initial entry history length plus the value of cntIndx from the top of history + 1 from the current length of history.

Finally as I leave, I set the history length now to the last history length.

I've tested this with 4 modules/pages with multiple iframes that are being called from several different places in different ways in the application I'm working on. Each different way comes in with a different starting history length. I ran tests on each way each module was called/used. The last 2 involved quite a bit of random movement on each composite page. It worked as expected in all instances.

Any comments will be appreciated. Thanks everyone for looking. And you can see the solution work in the link above in any of the 5 browsers above.

My edits tightened the code a little and added comments.

ct