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

Posted 2023-02-22

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

【英文标题】：How to have desired page reached when a user selects "Open in New Tab"/"Open in New Window" rather than clicks with html/javascript

【发布时间】：2021-03-24 15:10:50

【问题描述】：

我正在从 URL 中获取参数并将它们传递到网站上的其他页面，所以我使用此代码来执行此操作...

为了……

https://example.com/page1/?Id=12345&Email=[e-mail]

我可以使用下面的代码将参数“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>

当我单击链接进入下一页时，这工作正常，但如果我右键单击该链接并选择“在新选项卡中打开”“在新窗口中打开”“以隐身方式打开”......同一页面重新加载...

如何设置它以在新选项卡或窗口或隐身模式中右键单击链接并选择查看目标页面（本例中为第 2 页）...或浏览器允许目标页面的任何方式显示在浏览器中？

【问题讨论】：

您将在页面加载时更新链接的href，并让浏览器处理标签打开而不是onclick

【参考方案1】：

您可以在href 中设置page2 的路径，并将所有参数从location.search 直接复制到<a> 元素的search 属性中。

<a> 元素具有与 location 相同的所有属性。

如果您需要在传递给<a> 之前从当前页面中删除一些参数，您可以循环通过URLSearchParams() 对象并将它们从对象中删除并将对象本身传递给

 linkElement.search = mySearchParamsObject

也不需要解析成字符串

// demo only add search params to url
history.pushState(null, null, '/?Id=12345&Email=[e-mail]')

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>