I'm trying to use the history API but I can't get it working as I'd expect. I've look at several examples but they all appear to be doing something wrong. That is, this flow doesn't work as expected:
On new page call pushState
On popState load desired page
What I'm finding happens is that for #2 the URL is not modified to the old state (testing in Firefox). Unless I call pushState, or replaceState again the URL stays where it was. I'm also finding that somehow the first page ends up duplicated in the browser's history (holding down back I can see it).
How exactly should the history be used so that Back/Forward/Reload all work like a traditional page flow?
The problems I'm having relate to the use of an iframe in the page. Each change of the location of the frame creates a new history entry which messages with the desired history. To prevent this one must replace the iframe location instead of assigning a new one.
document.getElementById('content_frame').contentWindow.location.replace( new_path )
Location.replace doesn't create a history entry.
Related
Currently for my back button I'm using window.history.back() which, in itself is working properly. My issue is with an iframe that I have for refreshing sessions, example
<iframe src="https://example.com/some/path?gcp-iap-mode=SESSION_REFRESHER" style="width:0;height:0;border:0; border:none;"></iframe>
Path in my project represents current url, so it keeps changing every time I change locations. Now, with the source the iframe has, it keeps throwing 404 and getting into my history so instead of clicking back button once, I have to do it at least two times - first times it fails as it tries to reach randompath?gcp-iap-mode=SESSION_REFRESHER and then it goes to proper path.
My question is, is there a way for me to check the "back" value, to see if the "back" value has a specific query (for example gcp-iap-mode part), or check if it's the same as a current location (duplicate) so I can skip that entry (and couple of back steps) and go back to a different path in history stack?
Seems an issue like this is common in iframes. I tried looking at it from a wrong perspective, by looking for ways to change history where the only thing that needed to be changed is the iframe itself.
Basically when we only change the src attribute of the iframe it gets rendered again and again and the src gets pushed to history stack. What we needed here was the iframe to unmount and the soultion to all of that was pretty simple - add a key prop to the iframe.
This is a blog page that helped me, so if somebody wants to read more:
https://www.aleksandrhovhannisyan.com/blog/react-iframes-back-navigation-bug/
I am trying to implement "go back" functionality for a page that could be access from n different urls.
Example, all the following URLs will link to abc.com/b1:
abc.com/a1
abc.com/a2
abc.com/a3
abc.com/a4
...
abc.com/an
From abc.com/b1 I want to support a link that takes you back to the previous page you visited.
My first attempt is to use:
...
const navigate = useNavigate();
navigate(-1);
...
However, if you land straight in abc.com/b1 navigate(-1) will likely take you outside of my application into some other site, or browser about:blank.
What is the best approach to implement such functionality?
is there a way to access the history length to check wether we should navigate(-1) or push a new page?
should I pass additional state/query from a pages to b? so b knows how to go back? this seems like overkill.
Thanks.
I was with the same problem, but I finally found a solution that worked for me.
I'm using the react-router-dom#6.2.1.
// Simply return to the previous page or to the initial route
navigate('..')
Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.
I am currently working on a GWT application that requires report
printing. The use can select report parameters from a screen, and
upon clicking print we would like to display the file as it is being
generated. Currently we have server side code that is generating HTML
and writing it to a file. When the user clicks print, an RPC is being
made to pass the report parameters to the server and begin the
report. A second RPC is made after the report has started to obtain
the report's URL. From here, we are creating a Frame and setting the
URL to be the URL retrieved by the second RPC.
The issue I am running into, is that when setUrl gets
called, it only displays as much HTML that was contained in the file
at the time of the call. What would be the best way to refresh just
the frame containing the HTML report? It appears making subsequent
calls to setUrl passing in the same Url each time would do the trick,
but it actually doesn't seem to contain the additional content that
would've been written since the last call. It is also resetting the
vertical scroll bar's position each time back to the top of the bar
which is something else I would like to prevent.
Is there a better way to go about doing this?
I think it would be better to request HTML in chunks from GWT and render them as they arrive. Doing this with ajax instead of wholesale refreshes will enable better behavior with the scrollbar, eliminate flashing, get around caching problems, and will also let you add some feedback like a progress bar, estimated time remaining, etc.
There's a lot more infrastructure required for this, but your suggested solution doesn't seem quite appropriate for the task.
I'm wracking my brain on this one.
After an HTML document loads in a browser, I want to be able to monitor
the page in case any content on it changes for any reason.
Is there a Javascript function with which I can track 'what has
changed' on the webpage. This should be irrespective of the type of content on the HTML page.
I have two examples for you to ponder on:
Ex1:
Say in an HTML document there are two select boxes s1 and s2.
The items list in s2 depends on selections in s1 (page is not
refreshed — that is, s2 is loaded through Ajax or something).
So after the HTML page loads I need to get a notification whenever s2
is populated...
Ex2:
Say, in an HTML page, there's a link, Onclicking which a light pop-up
div is created with some text.
How can I capture the content of this dynamic pop-up?
In all this discussion, I'm not taking into account any particular
format of HTML...the HTML content can be anything...I just need
to keep tracking if any content changes after the page loads...
Ideally I need to achieve this using JavaScript (client-side
scripting).
How can I achieve this?
You can keep track of changes in a textbox using onkeyup. This will tell you every time someone makes a change in a given textbox.
This could potentially fire alot of events. However, using onblur won't necessarily tell you about changes in the textbox and onchange's browser coverage is spotty at best.
If you are using AJAX, you could setup the response function to handle a home grown "event listening" system. So after the response does what it needs to do, it could call any methods that were registered with it, passing in the response text when necessary.
So from your examples above, in Ex1, when the AJAX returns from S1, it would load S2, then call a method saying S2 had changed. In Ex2, when the new AJAX returns the DIV's contents, after loading it into the DIV, it call a different method (or possibly the same depending on what your trying to do) and alerts it that the DIV has new contents.
You could set your "watcher" script as a timer, running a diff function on the current document.body.innerHTML and a stored version captured on load. Depending on how fast the diff will run will give you an idea on what timer interval to use.
This may not capture changes in form elements, but for those, it's easier to loop through all form elements in every form on the page.
Here's someone's diff function I found on Google: http://snowtide.com/jsdifflib