How can I determine if the page is loaded in a new window or tab?

Question

I have a gallery website with paintings that scrolls from left to right with overflow-x: scroll.

When the user clicks on a painting, the current scroll position is stored in localStorage and the detail page is shown. When the user clicks the back button, the scroll position is being set when the page is loaded.

I want this scroll position to be unset when the page is being loaded in a new tab or window. How can I tell if this happened?

Unsetting on page reload is already working. But opening the website in a new window does not count as a reload apparently.

I have tried reading the sessionStorage, but that doesn't do the trick.

if (performance.navigation.type == 1 || sessionStorage.isNewSession) {
   localStorage.setItem("scrollPositionHome", 0);
}

performance.navigation.type sees it's a page reload, sessionStorage.isNewSession isn't doing much.

I just figured out I forgot to set the `isNewSession` variable. Be right back, smacking myself in the head. — Bart Klein Reesink, Apr 18 '19 at 11:59
Oh, it's still not working as expected. When I open the website in a new window the scroll position is still the same. — Bart Klein Reesink, Apr 18 '19 at 12:01

Wimanicesir · Answer 1 · 2019-04-18T12:05:00.633

0

You could right your own code to open links!

$('a').on('click', function(e) {
    // This will prevent the default behaviour 
    e.PreventDefault();
    // On Control click it's opened in a new window
    if (e.ctrlKey || e.metaKey){
    // Open in new window, you can already reset your localstorage here.
    localStorage.setItem("scrollPositionHome", 0);
    window.open(e.target.href);    
     } else {
    // Just a simple redirect
    window.location.href = e.target.href;
    }
});

NOTE: This is not tested! I will correct this if needed!

edited Apr 18 '19 at 12:05

answered Apr 18 '19 at 12:00

Wimanicesir

4,606
2
11
30

I don't think this is what I'm looking for. The scroll position needs to be reset when the website is opened in a new tab or window, not from an action on the website. – Bart Klein Reesink Apr 18 '19 at 12:02
Well, you overwrite the logic on opening links. So as you can see in the comments of the code. If a control click is noticed, clear the LS then open it. – Wimanicesir Apr 18 '19 at 12:04
@Bronathan gave me the correct answer, thanks for your input! – Bart Klein Reesink Apr 18 '19 at 12:06
No problem, it is indeed a better solution! – Wimanicesir Apr 18 '19 at 12:13

score 0 · Accepted Answer · answered Apr 18 '19 at 12:01

0

You seem to be mixing up sessionStorage and localStorage. You can find a small explanation following this link.

TL;DR: sessionStorage is per tab and localStorage will persist over multiple sessions. You could just empty your localStorage or use the sessionStorage in the first place.

If you could provide some code, we can give you a more thorough explanation / help.

answered Apr 18 '19 at 12:01

Bronathan

26
1
5

1

I guess I had a brain fart. Your suggestion is the solution. Much thanks. – Bart Klein Reesink Apr 18 '19 at 12:05

How can I determine if the page is loaded in a new window or tab?

2 Answers2