在先前打开的具有相同基础 URL 的窗口中打开网址。

huangapple go评论76阅读模式
英文:

Open url in previously opened window with same base URL

问题

以下是翻译好的部分:

"The requirement outlines a behavior for a solution that involves a list of links referring to URLs from multiple subdomains."
这个要求概述了一个解决方案的行为,涉及到一个包含来自多个子域的URL链接列表。

"Specifically, when a user clicks on the first URL in the list, it should open in a new tab."
具体来说,当用户点击列表中的第一个URL时,它应该在新标签页中打开。

"However, when the user clicks on the second URL, the behavior is more complex."
然而,当用户点击第二个URL时,行为更为复杂。

"The solution should check if the previously opened tab is for the same subdomain as the second URL. If it is, the solution should open the second URL in the same tab. If the previously opened tab is for a different subdomain, the solution should open the second URL in a new tab."
解决方案应该检查先前打开的标签页是否与第二个URL的子域相同。如果相同,解决方案应在同一标签页中打开第二个URL。如果先前打开的标签页属于不同的子域,解决方案应在新标签页中打开第二个URL。

"This requirement implies that the solution needs to keep track of the subdomains of the URLs that have been clicked by the user."
这个要求暗示着解决方案需要跟踪用户点击的URL的子域。

"It should also be able to differentiate between different tabs that have been opened, and know which subdomain each tab corresponds to."
它还应该能够区分已经打开的不同标签页,并知道每个标签页对应的子域。

"When a new URL is clicked, the solution should be able to match it to the correct subdomain and decide whether to open a new tab or use an existing one."
当点击新的URL时,解决方案应能够将其与正确的子域匹配,并决定是打开新的标签页还是使用已有的标签页。

"Tried using following Javascript but it seems not to work in all cases."
尝试使用以下JavaScript代码,但似乎不在所有情况下都有效。

英文:

The requirement outlines a behavior for a solution that involves a list of links referring to URLs from multiple subdomains. Specifically, when a user clicks on the first URL in the list, it should open in a new tab. However, when the user clicks on the second URL, the behavior is more complex. The solution should check if the previously opened tab is for the same subdomain as the second URL. If it is, the solution should open the second URL in the same tab. If the previously opened tab is for a different subdomain, the solution should open the second URL in a new tab.

This requirement implies that the solution needs to keep track of the subdomains of the URLs that have been clicked by the user. It should also be able to differentiate between different tabs that have been opened, and know which subdomain each tab corresponds to. When a new URL is clicked, the solution should be able to match it to the correct subdomain and decide whether to open a new tab or use an existing one.

Tried using following Javascript but it seems not to work in all cases.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// keep track of previously opened tabs
const openTabs = {};

// handle click event on link
function handleClick(event) {
  event.preventDefault(); // prevent default link behavior

  const url = event.target.href;
  const subdomain = getSubdomain(url);
  const existingTab = openTabs[subdomain];

  if (existingTab) {
    // if tab for subdomain already exists, use it
    window.open(url, existingTab);
  } else {
    // if no tab for subdomain exists, open in new tab
    const newTab = window.open(url);
    openTabs[subdomain] = newTab;
  }
}

// extract subdomain from URL using regex
function getSubdomain(url) {
  const match = url.match(/^(?:https?:\/\/)?([^.]+)\./);
  return match ? match[1] : &#39;&#39;;
}

// add click event listener to all links on the page
const links = document.querySelectorAll(&#39;a&#39;);
links.forEach(link =&gt; {
  link.addEventListener(&#39;click&#39;, handleClick);
});

<!-- end snippet -->

答案1

得分: 1

[`window.open`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open)的`target`参数需要是一个字符串。

如果使用相同的字符串(而不是`_`特殊字符之一),那么将重用相同的选项卡/窗口来打开新的URL。

这里有一个简化的示例:

```javascript
let target = "SO";
window.open("https://stackoverflow.com/questions/75553310/open-url-in-previously-opened-window-with-same-base-url", target)
window.open("https://stackoverflow.com", target)

不幸的是,SO沙盒不允许使用window.open,所以在fiddle中提供了相同的内容。


对代码的更改需要确定target的值,你已经在getSubdomain中实现了:

function handleClick(event) {
  event.preventDefault();

  const url = event.target.href;
  const subdomain = getSubdomain(url);

  window.open(url, subdomain);
}

现在,所有具有与getSubdomain返回的相同结果的链接将在同一个选项卡中打开,并重用该选项卡。

无论是选项卡还是窗口都取决于用户在其浏览器中的设置,并且无法通过js进行配置。


<details>
<summary>英文:</summary>

The `target` parameter of [`window.open`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) needs to be a string.   

If the same string is used (and not one of the `_` specials), then the same tab/window will be reused for the new url.  

Here&#39;s a simplified example

let target = "SO";
window.open("https://stackoverflow.com/questions/75553310/open-url-in-previously-opened-window-with-same-base-url", target)
window.open("https://stackoverflow.com", target)

Unfortunately SO sandbox doesn&#39;t allow window.open, so here&#39;s the same in a [fiddle](https://jsfiddle.net/cd8rqut5/)


----

Changes to your code require determining a value for `target` which you already do with `getSubdomain`:

function handleClick(event) {
event.preventDefault();

const url = event.target.href;
const subdomain = getSubdomain(url);

window.open(url, subdomain);
}


Now all links with the same result from getSubdomain will open in the same tab and reuse that tab


*Whether it&#39;s a tab or window will depend on the user&#39;s settings in their browser and cannot be configured via js.*

</details>



huangapple
  • 本文由 发表于 2023年2月24日 14:39:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/75553310.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定