Javascript - URL with hash behaves differently when used with window.open() method without window.location.href property

ryne
January 5, 2024
215 views
0 votes
2 Answers

I am not familiar with Javascript, and would be grateful if you could enlighten me regarding the following observation.

I have this Javascript function which should navigate to a page with param string appended. For example:

savebuttonClick() {

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child#Id=123"),"_self");    
     

    }

However, the above script would navigate to the correct URL, but with a blank page displayed. The page would load its content as expected, upon a manually refresh of the browser tab.

Changing the scripts by constructing the URL with the window.location.href property first before navigating with the window.open() method would addressed the issue. The page will be displayed as expected, and the parameter (Id)’s value (123) will be passed to the page:

       window.location.href = encodeURI("/lightning/n/Test_Win_Open_Child#Id=123");
       window.open(window.location.href,"_self");

Or, replacing the hash(#) with question mark (?) would also work:

       window.open(encodeURI("/lightning/n/Test_Win_Open_Child?Id=123"),"_self");

Can someone please help explain the above observation?

Thank you very much!

Answers

- FlorentAkpro
- January 5, 2024 at 4:51 am
- 0 votes
0
Hi the issue with the original script is that the encodeURI() function only encodes special characters in a URL, such as spaces and question mark. However, it does not encode the hash symbol (#), which is used to specify the location of a fragment identifier in a URL.

When you use window.open() to navigate to a URL with a fragment identifier, the browser will not reload the page, but instead just scroll to the specified location on the current page. This is why you see a blank page displayed.

By using window.location.href to construct the URL first and then passing it to window.open(), you are encoding the hash symbol (#) as well as any other special characters in the URL. This ensures that the browser will reload the page with the specified fragment identifier.

Alternatively, you can replace the hash symbol (#) with a question mark (?) in the URL. This will make the browser treat the parameter as a query parameter instead of a fragment identifier, which will cause the page to reload with the specified parameter value.

Login or Signup to reply.

- traktor
- January 5, 2024 at 10:48 am
- 0 votes
0
You’ve supplied a relative URL to window.open:
```
encodeURI("/lightning/n/Test_Win_Open_Child#Id=123")
```
which evaluates to "/lightning/n/Test_Win_Open_Child#Id=123" in any case.

window.open opens a page with the url "about:blank" by default. A relative url applied to about:blank is still a blank page: exactly what you first see.

Here’s the tricky bit.
1. The base url of a page opened with about: blank is the url of the opener. Case in point, if you document.write content to an opened page that contains a link such as # to go to the top of the document, taking the link opens the opener page at the top, instead of scrolling to the top of the opened page. (IMHO this a bug but I digress).
2. If you reload the opened page, the relative url of the opened page is resolved against the url of the opener page, as reported in the post.
Predictive confirmation

Supply an absolute url to window.open instead of a relative url.

PostScipt

Using the hash tag in a URL provides a fragment identifier to browsers, but does not require them to reload a page from the server.

Providing a query component, introduced by ?, does require browsers to reload the page from the server, which requires an absolute URL. Resolving a relative url against the opened pages base url (not "about:blank") would cause reloading the opened page with the intended URL.
Login or Signup to reply.