當用戶選擇“在新選項卡中打開”/“在新窗口中打開”而不是使用 html/javascript 點擊時如何到達所需的頁面

Question

我正在從 URL 獲取參數並將它們傳遞到網站上的其他頁面，所以我使用此代碼來執行此操作...

為了...

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

我可以使用下面的代碼將參數“Id”和“Email”傳遞到下一頁......

<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>

當我單擊鏈接進入下一頁時，這工作正常，但是如果我右鍵單擊鏈接和 select “在新選項卡中打開”“在新窗口中打開”“以隱身方式打開”......相同的頁面重新加載.. .

如何將其設置為右鍵單擊鏈接並選擇在新選項卡或 window 或隱身模式中查看目標頁面（本例中為第 2 頁）...在瀏覽器中？

Answer 1

您可以在href中設置 page2 的路徑，並將所有參數直接從location.search復制到<a>元素的search屬性。

<a>元素具有與location相同的所有屬性。

如果您需要在傳遞到<a>之前從當前頁面刪除一些參數，您可以循環通過 URLSearchParams URLSearchParams() object 並將它們從 object 中刪除並將 object 本身傳遞給

 linkElement.search = mySearchParamsObject

也無需解析為字符串

 // 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>