在新选项卡（而不是新窗口）中打开 URL

最新推荐文章于 2024-04-22 08:48:20 发布

HuntsBot

最新推荐文章于 2024-04-22 08:48:20 发布

阅读量977

点赞数

文章标签： css 前端 html postcss

本文链接：https://blog.csdn.net/kalman2019/article/details/128490445

版权

问：

我正在尝试在新标签中打开 URL，而不是弹出窗口。

我已经看到相关的问题，其中的响应看起来像：

window.open(url,'_blank');
window.open(url);

但是它们都不适合我，浏览器仍然试图打开一个弹出窗口。

答1:

一个优秀的自由职业者，应该有对需求敏感和精准需求捕获的能力，而huntsbot.com提供了这个机会

这是一个技巧，

function openInNewTab(url) {
 window.open(url, '_blank').focus();
}

//or just
window.open(url, '_blank').focus();

在大多数情况下，这应该直接在链接的 onclick 处理程序中发生，以防止弹出窗口阻止程序和默认的“新窗口”行为。您可以这样做，或者向您的 DOM 对象添加一个事件侦听器。

Something To Click On

http://www.tutsplanet.com/open-url-new-tab-using-javascript/

不工作。在地址栏右侧收到一条消息：弹出窗口被阻止。然后我允许弹出窗口。瞧，它在弹出窗口中打开，而不是在选项卡中！ OS X Lion 上的 Chrome 22.0.1229.94。

@b1naryatr0phy 那是因为您实际上没有正确测试它。更改浏览器中的设置。它是在选项卡中打开还是在窗口中打开取决于浏览器的设置。通过调用 window.open（或任何 Javascript）来选择如何打开新窗口/选项卡，您无能为力。

var win = window.open(url, '_blank'); '_blank' 不是必需的，对于 window.open()，第二个参数是 strWindowName，用于：新窗口的字符串名称。该名称可以用作链接和表单的目标，使用的 target 属性。或<表格>元素。名称不应包含任何空白字符。请注意，strWindowName 没有指定新窗口的标题。

@hydRANger MDN 上的相同 window.open() 链接：要在每次调用 window.open() 时打开 new 窗口，请为 windowName 使用特殊值 _blank。

如果有什么需要更改浏览器设置，请避免！

答2:

huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

作者无法选择在新选项卡而不是新窗口中打开；这是用户偏好。（请注意，大多数浏览器中的默认用户首选项是针对新选项卡的，因此在未更改该首选项的浏览器上进行的简单测试不会证明这一点。）

CSS3 提出了 target-new，但提出了 the specification was abandoned。

The reverse is not true;通过在 window.open() 的第三个参数中为窗口指定某些窗口功能，您可以在偏好选项卡时触发一个新窗口。

为什么这是公认的答案？我已经测试了 duke 和 arikfr 给出的以下答案，它们在 FF、Chrome 和 Opera 中运行良好，除了 IE（它不起作用）和 Safari（它在新窗口而不是新标签中打开）。

@AliHaideri Javascript 与新选项卡/窗口的打开方式无关。这完全取决于您的浏览器设置。使用 window.open 告诉浏览器打开新内容，然后浏览器打开在其设置中选择的内容 - 选项卡或窗口。在您测试的浏览器中，将设置更改为在新窗口而不是选项卡中打开，您会看到其他人的解决方案是错误的。

有两件事比告诉他们不能做的事情更浪费别人的时间。 (1) 告诉他们不能做的事情可以做。（2）保持沉默，让他们继续寻找方法来做一些不能做的事情。

@Luke：如果这是一个如何仅在您自己的浏览器中获得此功能的问题，那可能是 SuperUsers 网站的问题。

@Bondye — 问题是询问新标签而不是新窗口。您获得新窗口的事实是重点。

答3:

打造属于自己的副业，开启自由职业之旅，从huntsbot.com开始!

如果实际点击事件没有发生，window.open() 将不会在新标签中打开。在给出的示例中，URL 是在实际点击事件中打开的。如果用户在浏览器中进行了适当的设置，这将起作用。

Link

     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });

同样，如果您尝试在 click 函数中执行 Ajax 调用并希望在成功时打开一个窗口，请确保您在执行 Ajax 调用时设置了 async : false 选项。

huntsbot.com洞察每一个产品背后的需求与收益，从而捕获灵感

很高兴将此标记为正确答案。我对 Chrome v26 (Windows) 的测试证实，如果代码在按钮的单击处理程序中，它会打开一个新选项卡，如果代码以编程方式（例如从控制台）调用，则会打开一个新窗口。

@Ian根据我对具有默认设置的浏览器的测试，此答案适用于上述答案不适用的情况。仅当用户更改了默认设置时，“您无能为力”的公认答案才成立。

@Ian为了清楚起见，我在有关用户设置的回答警告中提到了这一点。 “只要用户在浏览器中有适当的设置，这将起作用。”我认为大多数用户不会更改浏览器设置，这个答案适用于大多数用户。

async: false 在 Chrome 中不起作用。要通过回调打开一个新窗口，您需要在发送 HTTP 请求之前先打开一个空窗口，然后再更新它。这是一个good hack。

不需要 e.preventDefault() 吗？

答4:

huntsbot.com – 程序员副业首选，一站式外包任务、远程工作、创意产品分享订阅平台。

这将创建一个虚拟 a 元素，为其提供 target=“_blank”，使其在新标签中打开，为其提供正确的 URL href，然后单击它。

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    rel: 'noopener noreferrer',
    href: href,
  }).click();
}

然后你可以像这样使用它：

openInNewTab("https://google.com");

重要的提示：

这必须在所谓的“可信事件”回调期间调用 - 例如。在点击事件期间（直接在回调函数中不需要，但在点击动作期间）。否则浏览器会阻止打开新页面

如果您在某个随机时刻（例如，在某个时间间隔内或在服务器响应之后）手动调用它 - 它可能会被浏览器阻止（这是有道理的，因为它会带来安全风险并可能导致糟糕的用户体验）

谢谢你。你的纯 JS 有一个缺失的部分——正如 Luke Alderton 所写（见下文），你需要将创建的元素附加到文档正文中，在你的代码中它至少在 Firefox 37 中它没有做任何事情.

@mcginniwa 像这样的任何操作 - 如果不是由鼠标单击等用户操作触发，则会变成弹出窗口阻止程序。想象一下，您可以在没有用户操作的情况下使用 Javascript 打开任何 url - 这将是非常危险的。如果您将此代码放在点击函数之类的事件中 - 它会正常工作 - 这里所有建议的解决方案都是一样的。

您可以按如下方式简化代码：$('',{'href': url, 'target', '_blank'}).get(0).click();

@shaedrich 受您的剪辑启发，我添加了非 jquery 单线：Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

在没有 rel="noreferrer" 和 rel="noopener" 的情况下使用 target="_blank" 会使网站容易受到 window.opener API 攻击（漏洞描述），但请注意，在较新的浏览器版本中设置 target="_blank" 隐式提供与设置 rel="noopener" 相同的保护。 developer.mozilla.org/en-US/docs/Web/HTML/Element/A

答5:

打造属于自己的副业，开启自由职业之旅，从huntsbot.com开始!

浏览器在处理window.open方面有不同的行为

您不能期望所有浏览器的行为都相同。 window.open 不能可靠地跨浏览器在新标签页上打开弹出窗口，而且它还取决于用户的偏好。

在Internet Explorer（11）上，例如用户可以选择在新窗口或新标签页中打开弹窗，不能通过window.open强制Internet Explorer 11以某种方式打开弹窗，正如 Quentin’s answer 中提到的那样。

至于 Firefox (29)，window.open(url, ‘_blank’) 的行为取决于浏览器的选项卡首选项，尽管您仍然可以通过指定宽度和高度（参见下面的“Chrome”部分）。

互联网浏览器 (11)

您可以将 Internet Explorer 设置为在新窗口中打开弹出窗口：

https://i.stack.imgur.com/IYWRUm.png

之后，尝试运行 window.open(url) 和 window.open(url, ‘_blank’)。观察页面在新窗口中打开，而不是在新选项卡中。

火狐 (29)

您还可以设置选项卡首选项以打开新窗口，并查看相同的结果。

铬合金

看起来 Chrome（版本 34）没有任何用于选择在新窗口或新标签页中打开弹出窗口的设置。虽然，我们讨论了一些方法（编辑注册表）in this question。

在 Chrome 和 Firefox 中，指定宽度和高度将强制弹出窗口（如答案 here 中所述），即使用户已将 Firefox 设置为在新标签页中打开新窗口

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

但是，在 Internet Explorer 11 中，如果在浏览器首选项中选择了选项卡，则相同的代码将始终在新选项卡中打开链接，指定宽度和高度不会强制弹出新窗口。

在 Chrome 中，似乎 window.open 在 onclick 事件中使用时会打开一个新标签，而在浏览器控制台 (as noted by other people) 中使用时会打开一个新窗口，然后弹出-ups 在指定宽度和高度时打开。

补充阅读：window.open documentation。

您没有回答问题，您只是证明了 window.open 不一致。

请提供解决方案，这个“答案”寻求解决方案

答6:

huntsbot.com – 高效赚钱，自由工作

如果您使用 window.open(url, ‘_blank’)，它将在 Chrome 上被阻止（弹出窗口阻止程序）。

尝试这个：

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

使用纯 JavaScript，

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};

但是在这个问题中，他们没有提到网站作者。只想在新窗口或新标签中打开一个网址。这取决于浏览器。我们不需要担心作者。请检查那个小提琴。这是工作

发现，它在js fiddle和plunker上不起作用，但是在你创建一个html文件时起作用。是因为 js fiddle，输出显示在 iframe 上，所以新窗口因为 the request was made in a sandboxed frame whose 'allow-popups' permission is not set 而被阻塞

答7:

huntsbot.com聚合了超过10+全球外包任务平台的外包需求，寻找外包任务与机会变的简单与高效。

我使用以下，效果很好！

window.open(url, '_blank').focus();

根据浏览器设置，这可能会在新选项卡或窗口中打开。这个问题特别是关于在新选项卡中打开，即使首选项是针对新窗口的。

没错，但正如我们已经确定的那样。在选项卡或窗口中打开是用户偏好。在新窗口或标签中打开网址的答案非常简单。

答8:

huntsbot.com全球7大洲远程工作机会，探索不一样的工作方式

为了详细说明史蒂文斯皮尔伯格的回答，我在这种情况下这样做了：

$('a').click(function() {
  $(this).attr('target', '_blank');
});

这样，就在浏览器跟随链接之前，我正在设置目标属性，因此它将使链接在新选项卡或窗口中打开（取决于用户的设置）。

jQuery中的一行示例：

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

这也可以仅使用本机浏览器 DOM API 来完成：

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

答9:

huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

我认为你无法控制这一点。如果用户已将浏览器设置为在新窗口中打开链接，则您不能强制它在新选项卡中打开链接。

JavaScript open in a new window, not tab

答10:

huntsbot.com提供全网独家一站式外包任务、远程工作、创意产品分享与订阅服务!

一个有趣的事实是，如果用户没有调用该操作（单击按钮或其他东西）或者它是异步的，则无法打开新选项卡，例如，这不会在新选项卡中打开：

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

但这可能会在新选项卡中打开，具体取决于浏览器设置：

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

这在 Firefox 28、Chrome 34b 和 Safari 7.0.2 中作为弹出窗口被阻止，所有库存设置。 :(

“如果用户未调用该操作（单击按钮或其他内容）或者它是异步的，则无法打开新选项卡” - Chrome 为 true，但并非所有浏览器都为 true。将 open('http://google.com') 保存到 .html 文件并在最新版本的 Firefox 的全新安装中打开它；您会观察到 Firefox 在新选项卡中愉快地打开 Google（可能是在您告诉它允许弹出窗口之后），而不是新窗口。

答11:

huntsbot.com – 高效赚钱，自由工作

是在新标签页还是新窗口中打开 URL，实际上是由用户的浏览器偏好控制的。在 JavaScript 中无法覆盖它。

window.open() 的行为因使用方式而异。如果它作为用户操作的直接结果调用，让我们说一个按钮单击，它应该可以正常工作并打开一个新选项卡（或窗口）：

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

但是，如果您尝试通过 AJAX 请求回调打开新选项卡，浏览器将阻止它，因为它不是直接的用户操作。

要绕过弹出窗口阻止程序并从回调中打开一个新标签，这里有一个 little hack：

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});