在新标签页(而不是新窗口)中打开URL

2020/09/15 02:31 · javascript ·  · 0评论

我正在尝试在新选项卡(而不是弹出窗口)中打开URL

我看过相关的问题,答案看起来像这样:

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

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

作者无法选择在新标签页中打开,而不是在新窗口中打开。这是用户的偏爱(请注意,大多数浏览器中的默认用户首选项是针对新标签页的,因此在未更改首选项的浏览器中进行的琐碎测试不会证明这一点。)

CSS3提出了新的目标,但是该规范被放弃了

反向是不正确的; 通过在的第三个参数中为窗口指定尺寸window.open(),可以在选项卡的首选项触发新窗口。

这是一个把戏

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

在大多数情况下,这应该直接在onclick链接处理程序中发生,以防止弹出窗口阻止程序和默认的“新窗口”行为。您可以通过这种方式或通过向DOM对象添加事件侦听器来实现

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

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

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

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

同样,如果您试图在click函数中进行Ajax调用,并希望成功打开一个窗口,请确保您正在使用async : false选项集进行Ajax调用

window.open 无法在所有浏览器的新选项卡中可靠地打开弹出窗口

不同的浏览器 window.open 以不同的方式实现行为,尤其是在用户的浏览器首选项方面。您不能期望window.open在所有Internet Explorer,Firefox和Chrome上都具有相同的行为,因为它们处理用户浏览器首选项的方式不同。

例如,Internet Explorer(11)用户可以选择在新窗口或新选项卡中打开弹出窗口 window.open,而不能像Quentin的答案中所提到的那样强制Internet Explorer 11用户通过某种方式打开弹出窗口

对于Firefox(29)用户,使用方法window.open(url, '_blank') 取决于其浏览器的选项卡首选项,尽管您仍然可以通过指定宽度和高度来强迫他们在新窗口中打开弹出窗口(请参阅下面的“ Chrome的功能是什么?”一节)。

示范

转到浏览器的设置并将其配置为在新窗口中打开弹出窗口。

Internet Explorer(11)

Internet Explorer设置对话框1

Internet Explorer选项卡设置对话框

测试页

如上所述,将Internet Explorer(11)设置为在新窗口中打开弹出窗口后,请使用以下测试页进行测试window.open

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

请注意,弹出窗口是在新窗口而不是新选项卡中打开的

您还可以在Firefox(29)中测试其片段,并将其选项卡首选项设置为新窗口,并查看相同的结果。

那Chrome呢?window.open与Internet Explorer(11)和Firefox(29)的实现方式不同。

我不确定100%,但是Chrome(版本34.0.1847.131 m)似乎没有任何设置,用户可以用来选择是否在新窗口或新标签页(例如Firefox和Internet Explorer)中打开弹出窗口有)。我检查了Chrome文档中有关管理弹出窗口的内容,但没有提及任何有关弹出式窗口的内容。

同样,不同的浏览器似乎再次实现了 window.open 不同的行为在Chrome和Firefox中,即使用户已将Firefox(29)设置为在新标签页中打开新窗口(如JavaScript的回答在新窗口中打开,而不是标签页中所述指定宽度和高度也会强制弹出窗口。

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

但是,如果用户将选项卡设置为浏览器首选项,则上面相同的代码段将始终在Internet Explorer 11中打开一个新选项卡,甚至不指定宽度和高度也将为其强制弹出新窗口。

因此window.open,Chrome浏览器中的行为似乎是在onclick事件中使用时在新选项卡中打开弹出窗口,在浏览器控制台中使用时(如其他人所述在新窗口中打开弹出窗口,并在事件发生时在新窗口中打开弹出窗口。指定宽度和高度。

摘要

window.open 对于用户的浏览器首选项,不同的浏览器实现不同的行为您不能期望window.open在所有Internet Explorer,Firefox和Chrome上都具有相同的行为,因为它们处理用户浏览器首选项的方式不同。

附加阅读

一班轮:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

它创建一个虚拟a元素,将其赋予它target="_blank"以便在新选项卡中打开,赋予它适当的属性url href,然后单击它。

如果需要,您可以基于此创建一些功能:

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

然后可以像这样使用它:

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

重要的提示:

openInNewTab(以及此页面上的任何其他解决方案)必须在用户操作回调期间调用-例如 内部点击事件(直接在回调函数中不是必需的,而是在点击操作期间)。

如果您在某个随机时刻(例如,在某个时间间隔内或在服务器响应之后)手动调用它-它可能会被浏览器阻止(这很有意义,因为这会带来安全风险,并可能导致非常差的用户体验) )

如果您使用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;
};

为了详细说明史蒂芬·斯皮尔伯格的答案,我在这种情况下这样做:

$('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();

我使用以下内容,效果很好!

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

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

JavaScript在新窗口中打开,而不是选项卡

一个有趣的事实是,如果用户未调用操作(单击按钮或其他操作)或异步操作,则无法打开新选项卡,例如,它将不会在新选项卡中打开:

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

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

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

仅忽略[strWindowFeatures]参数将打开一个新选项卡,除非浏览器设置被覆盖(浏览器设置优先于JavaScript)。

新窗户

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

新标签

var myWin = window.open(strUrl, strWindowName);

- 要么 -

var myWin = window.open(strUrl);
(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))

您可以使用以下技巧form

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddle演示

如果您尝试通过自定义功能打开新标签页,则这与浏览器设置无关

在此页面中,打开一个JavaScript控制台并键入:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

而且,无论您的设置如何,它都会尝试打开一个弹出窗口,因为“点击”来自自定义操作。

为了表现得像链接上的实际“鼠标单击”,您需要遵循@spirinvladimir的建议真正创建它:

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

这是一个完整的示例(不要在jsFiddle或类似的在线编辑器上尝试,因为它不会让您从那里重定向到外部页面):

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>
function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

jQuery查询

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

或者,您可以只创建一个link元素并单击它...

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

不应被任何弹出窗口阻止程序阻止...希望如此。

这个问题有一个答案,但不是。

我发现一个简单的解决方法:

步骤1:建立不可见的连结:

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

步骤2:以编程方式单击该链接:

document.getElementById("yourId").click();

干得好!为我工作的魅力。

在此处输入图片说明

我研究了很多有关如何打开新选项卡并保持在同一选项卡上的信息。我发现了一个小窍门。假设您有需要打开的url - newUrl和旧的url- currentUrl,在打开新选项卡后需要保持打开状态。JS代码如下所示:

// init urls
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
// open window with url of current page, you will be automatically moved 
// by browser to a new opened tab. It will look like your page is reloaded
// and you will stay on same page but with new page opened
window.open(currentUrl , '_blank');
// on your current tab will be opened new url
location.href = newUrl;

如何创建一个<a>具有_blanktarget属性值和url作为href与风格显示:隐藏障患儿元素?然后添加到DOM,然后在children元素上触发click事件。

更新

那不行 浏览器阻止默认行为。它可以通过编程方式触发,但不会遵循默认行为。

亲自检查一下:http : //jsfiddle.net/4S4ET/

这可能是黑客,但是在Firefox中,如果您指定第三个参数'fullscreen = yes',则会打开一个新窗口。

例如,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

它似乎实际上覆盖了浏览器设置。

不要使用target =“ _ blank”

在我的情况下meaningfulName,请始终为该窗口使用特定的名称,在这种情况下,您可以节省处理器资源:

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

这样,当您单击例如10次按钮时,浏览器将始终在一个新选项卡中重新呈现它,而不是在10个不同的选项卡中打开它会消耗更多的资源。

您可以在上阅读有关此内容的更多信息MDN

从Firefox(Mozilla)扩展程序中打开一个新标签是这样的:

gBrowser.selectedTab = gBrowser.addTab("http://example.com");

这种方式与上述解决方案类似,但实现方式不同

.social_icon->一些带有CSS的类

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

对于我来说,这是可行的,只是阻止事件,将url添加到,<a> tag然后在上触发click事件tag

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>

window.open(url)会在新的浏览器标签页中打开链接。下方的JS替代品

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

这是工作示例(stackoverflow代码段不允许打开新标签页)

是否在新标签页或新窗口中打开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请求回调打开新标签页,则浏览器将阻止它,因为这是直接的用户操作。

绕过弹出窗口阻止程序并从回调中打开新选项卡,这里有一点技巧

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();
        });
});

有很多答案副本建议使用“ _blank”作为目标,但是我发现这没有用。正如Prakash指出的,这取决于浏览器。但是,您可以向浏览器提出某些建议,例如,窗口是否应具有位置栏。

根据Nico对chrome这个更具体的问题的回答,如果您建议足够的“类似标签的内容”,则可能会得到一个标签

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

免责声明:这不是万能药。它仍然取决于用户和浏览器。现在至少您还为窗口的外观指定了另一种首选项。

我尝试过这种方式,似乎工作正常

window.open('example.com', 'newWin');

我在这里找到了许多工作示例:

http://www.gtalbot.org/FirefoxSection/Popup/PopupAndFirefox.html#TestPopupControl

我会与写此书的人有所不同(在此处解释):“对于现有网页中的链接,如果新网页与以下网页属于同一网站,则浏览器将始终在新标签页中打开该链接。现有网页。” 至少对我而言,此“通用规则”适用于Chrome,Firefox,Opera,IE,Safari,SeaMonkey和Konqueror。

无论如何,有一种不太复杂的方法可以利用其他人的介绍。假设我们正在谈论您自己的网站(下面的“ thissite.com”),您要在其中控制浏览器的工作,然后在下面,您希望“ specialpage.htm”成为EMPTY,而其中根本没有HTML(节省了从服务器发送数据的时间!)。

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }
本文地址:http://javascript.askforanswer.com/zaixinbiaoqianyeerbushixinchuangkouzhongdakaiurl.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!