当用户选择“在新选项卡中打开”/“在新窗口中打开”而不是使用 html/javascript 点击时如何到达所需的页面

Question

I am grabbing parameters from the URL and passing them to other pages on the site, so I've used this code to do it...

For...

https://example.com/page1/?Id=12345&Email=email@email.com

I can pass the parameters "Id" and "Email" to the next page with the code below...

<script>
const params = new URLSearchParams(document.location.search);
const infusionId = params.get("Id");
const infusionEmail = params.get("Email");
const page2 =()=>window.location.assign(`https://example.com/page2/?Id=${infusionId}&Email=${infusionEmail}`);
</script>
<a href="#" onclick="page2()">Click here to get to Page 2</a>

This works fine when I click the link to get to next page, but if I right-click the link and select "Open in New Tab" "Open in New Window" "Open in Incognito"... the same page reloads...

How can I set this up to work for right clicking the link and selecting to view the destination page (Page 2 in this example) in the new tab or window or incognito... or whichever way browsers can allow the destination page to show up in the browser?

Answer 1

You can set the path to page2 in the href and copy all the params directly to the search property of the <a> element from location.search .

An <a> element has all the same properties as location does.

If you need to remove some of the params from current page before passing to the <a> you can loop through a URLSearchParams() object and remove them from the object and pass the object itself to

 linkElement.search = mySearchParamsObject

also without needing to parse to string

 // demo only add search params to url history.pushState(null, null, '/?Id=12345&Email=email@email.com') const link = document.querySelector('a') link.search = location.search; console.log('Updated href:\n', link.href)

 <a href="https://example.com/page2/" >Click here to get to Page 2</a>