📌  相关文章
📜  带有永久链接的新窗口中的 openurl (1)

📅  最后修改于: 2023-12-03 15:09:44.267000             🧑  作者: Mango

带有永久链接的新窗口中的 openurl

当我们需要在新窗口中打开一个特定的 URL 时,通常会使用 JavaScript 的 window.open() 方法。但是这种方法存在一个问题:当用户在新窗口中导航时,原始 URL 将会被覆盖掉,用户无法回到原始页面。

解决这个问题的方法是为新的窗口提供一个永久链接,以便用户可以随时回到原始页面。这可以通过在 URL 中添加一个查询字符串参数来实现,该参数包含原始页面的 URL。

以下是在新的窗口中打开链接并提供永久链接的 JavaScript 代码片段:

function openPermanentLink(url) {
  var permalink = encodeURIComponent(window.location.href);
  var newUrl = url + '?permalink=' + permalink;
  window.open(newUrl);
}

上述代码接受一个 URL 参数,并使用 encodeURIComponent() 方法对当前页面的 URL 进行编码。接下来,它将新的 URL 构建为原始 URL 加上包含永久链接的查询字符串参数。最后,使用 window.open() 方法在新的窗口中打开链接。

在新的窗口中,可以通过查询字符串参数中的 permalink 参数获取原始页面的 URL。这可以通过以下 JavaScript 代码片段来实现:

function getPermanentLink() {
  var queryString = window.location.search;
  var urlParams = new URLSearchParams(queryString);
  var permalink = urlParams.get('permalink');
  return decodeURIComponent(permalink);
}

上述代码首先获取查询字符串参数,并使用 URLSearchParams 对象解析它。接下来,它从解析后的参数中提取 permalink 参数,并使用 decodeURIComponent() 方法对其进行解码。

在上述代码片段中,“queryString”变量包含查询字符串参数,而“urlParams”对象包含解析后的参数。最后,使用 get() 方法从 permalink 参数中获取原始页面的 URL。

要在 HTML 中使用上述代码,可以将其包装在常规 JavaScript 脚本标记中。例如:

<button onclick="openPermanentLink('https://example.com')">Open Link</button>

<script>
function openPermanentLink(url) {
  // ...
}

function getPermanentLink() {
  // ...
}
</script>

这将创建一个按钮,当点击时将调用 openPermanentLink() 函数。同时,使用 getPermanentLink() 函数可以在新的窗口中获取原始页面的 URL。

以上就是带有永久链接的新窗口中的 openurl 的介绍,希望对程序员们有所帮助。