operator - javascript語法




使用JavaScript在新標籤(而不是新窗口)中打開一個URL (17)

我試圖在新標籤中打開一個URL ,而不是一個彈出窗口。 我已經看到相關問題,其答案如下所示:

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

但是他們都沒有為我工作,瀏覽器仍然試圖打開一個彈出窗口。


window.open無法在所有瀏覽器的新選項卡中可靠地打開彈出窗口

不同的瀏覽器 以不同的方式 實現 window.open 的行為 ,尤其是關於用戶的瀏覽器偏好。 您不能指望window.open在所有Internet Explorer,Firefox和Chrome中都有相同的行為,因為它們處理用戶的瀏覽器首選項的方式不同。

例如,Internet Explorer(11)用戶可以選擇在新窗口或新選項卡中打開彈出窗口, 但不能強制Internet Explorer 11用戶通過 window.open 以某種方式打開彈出窗口 ,正如昆汀的答案中所暗示的 。

至於Firefox(29)用戶,使用window.open(url, '_blank') 取決於他們的瀏覽器選項卡首選項,儘管您仍然可以強制他們通過指定寬度和高度來在新窗口中打開彈出窗口。 Chrome?“部分)。

示範

轉到瀏覽器的設置並將其配置為在新窗口中打開彈出窗口。

Internet Explorer(11)

測試頁面

如上所示,在設置Internet Explorer(11)以在新窗口中打開彈出窗口之後,使用以下測試頁來測試window.open

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

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

但是, 如果用戶將選項卡設置為瀏覽器首選項,甚至不指定寬度和高度將強制為他們彈出一個新的窗口彈出窗口,上面相同的代碼片段將始終在Internet Explorer 11中打開一個新選項卡

因此,Chrome中的window.open的行為似乎是在onclick事件中使用新標籤時打開彈出窗口,當從瀏覽器控制台使用( 如其他人注意到的 )時,在新窗口中打開它們並打開它們在指定寬度和高度的新窗口中。

概要

不同的瀏覽器 針對用戶的瀏覽器偏好 實施 window.open 的行為 您不能指望window.open在所有Internet Explorer,Firefox和Chrome中都有相同的行為,因為它們處理用戶的瀏覽器首選項的方式不同。

額外閱讀


The browser will always open the link in a new tab if the link is on the same domain (on the same website). If the link is on some other domain it will open it in a new tab/window, depending on browser settings.

So, according to this, we can use:

<a class="my-link" href="http://www.mywebsite.com" rel="http://www.otherwebsite.com">new tab</a>

並添加一些jQuery代碼:

jQuery(document).ready(function () {
    jQuery(".my-link").on("click",function(){
        var w = window.open('http://www.mywebsite.com','_blank');
        w.focus();
        w.location.href = jQuery(this).attr('rel');
        return false;
    });
});

因此,首先在_blank目標的同一網站上打開新窗口(它會在新標籤中打開它),然後在新窗口中打開您想要的網站。


一個班輪:

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

要么

有了jQuery,我使用這個:

var url = "http://google.com";
$("<a>").attr("href", url).attr("target", "_blank")[0].click();

它創建一個虛擬a元素,給它target="_blank"以便在新標籤中打開,給它正確的url href ,然後點擊它。

如果你想,基於這個你可以創建一些功能:

function openInNewTab(url) {
    $("<a>").attr("href", url).attr("target", "_blank")[0].click();
}

然後你可以像這樣使用它:

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

對於非jQuery場景,該函數看起來像這樣:

function openInNewTab(url) {
    var a = document.createElement("a");
    a.target = "_blank";
    a.href = url;
    a.click();
}

// And then
openInNewTab("http://google.com");

不知何故, website可以做到這一點。 (我沒有時間從這個混亂中提取它,但這是代碼)

if (!Array.prototype.indexOf)
    Array.prototype.indexOf = function(searchElement, fromIndex) {
        if (this === undefined || this === null)
            throw new TypeError('"this" is null or not defined');
        var length = this.length >>> 0;
        fromIndex = +fromIndex || 0;
        if (Math.abs(fromIndex) === Infinity)
            fromIndex = 0;
        if (fromIndex < 0) {
            fromIndex += length;
            if (fromIndex < 0)
                fromIndex = 0
        }
        for (; fromIndex < length; fromIndex++)
            if (this[fromIndex] === searchElement)
                return fromIndex;
        return -1
    };
(function Popunder(options) {
    var _parent, popunder, posX, posY, cookieName, cookie, browser, numberOfTimes, expires = -1,
        wrapping, url = "",
        size, frequency, mobilePopupDisabled = options.mobilePopupDisabled;
    if (this instanceof Popunder === false)
        return new Popunder(options);
    try {
        _parent = top != self && typeof top.document.location.toString() === "string" ? top : self
    } catch (e) {
        _parent = self
    }
    cookieName = "adk2_popunder";
    popunder = null;
    browser = function() {
        var n = navigator.userAgent.toLowerCase(),
            b = {
                webkit: /webkit/.test(n),
                mozilla: /mozilla/.test(n) && !/(compatible|webkit)/.test(n),
                chrome: /chrome/.test(n),
                msie: /msie/.test(n) && !/opera/.test(n),
                firefox: /firefox/.test(n),
                safari: /safari/.test(n) && !/chrome/.test(n),
                opera: /opera/.test(n)
            };
        b.version = b.safari ? (n.match(/.+(?:ri)[\/: ]([\d.]+)/) || [])[1] : (n.match(/.+(?:ox|me|ra|ie)[\/:]([\d.]+)/) || [])[1];
        return b
    }();
    initOptions(options);

    function initOptions(options) {
        options = options || {};
        if (options.wrapping)
            wrapping = options.wrapping;
        else {
            options.serverdomain = options.serverdomain || "ads.adk2.com";
            options.size = options.size || "800x600";
            options.ci = "3";
            var arr = [],
                excluded = ["serverdomain", "numOfTimes", "duration", "period"];
            for (var p in options)
                options.hasOwnProperty(p) && options[p].toString() && excluded.indexOf(p) === -1 && arr.push(p + "=" + encodeURIComponent(options[p]));
            url = "http://" + options.serverdomain + "/player.html?rt=popunder&" + arr.join("&")
        }
        if (options.size) {
            size = options.size.split("x");
            options.width = size[0];
            options.height = size[1]
        }
        if (options.frequency) {
            frequency = /([0-9]+)\/([0-9]+)(\w)/.exec(options.frequency);
            options.numOfTimes = +frequency[1];
            options.duration = +frequency[2];
            options.period = ({
                m: "minute",
                h: "hour",
                d: "day"
            })[frequency[3].toLowerCase()]
        }
        if (options.period)
            switch (options.period.toLowerCase()) {
                case "minute":
                    expires = options.duration * 60 * 1e3;
                    break;
                case "hour":
                    expires = options.duration * 60 * 60 * 1e3;
                    break;
                case "day":
                    expires = options.duration * 24 * 60 * 60 * 1e3
            }
        posX = typeof options.left != "undefined" ? options.left.toString() : window.screenX;
        posY = typeof options.top != "undefined" ? options.top.toString() : window.screenY;
        numberOfTimes = options.numOfTimes
    }

    function getCookie(name) {
        try {
            var parts = document.cookie.split(name + "=");
            if (parts.length == 2)
                return unescape(parts.pop().split(";").shift()).split("|")
        } catch (err) {}
    }

    function setCookie(value, expiresDate) {
        expiresDate = cookie[1] || expiresDate.toGMTString();
        document.cookie = cookieName + "=" + escape(value + "|" + expiresDate) + ";expires=" + expiresDate + ";path=/"
    }

    function addEvent(listenerEvent) {
        if (document.addEventListener)
            document.addEventListener("click", listenerEvent, false);
        else
            document.attachEvent("onclick", listenerEvent)
    }

    function removeEvent(listenerEvent) {
        if (document.removeEventListener)
            document.removeEventListener("click", listenerEvent, false);
        else
            document.detachEvent("onclick", listenerEvent)
    }

    function isCapped() {
        cookie = getCookie(cookieName) || [];
        return !!numberOfTimes && +numberOfTimes <= +cookie[0]
    }

    function pop() {
        var features = "type=fullWindow, fullscreen, scrollbars=yes",
            listenerEvent = function() {
                var now, next;
                if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
                    if (mobilePopupDisabled)
                        return;
                if (isCapped())
                    return;
                if (browser.chrome && parseInt(browser.version.split(".")[0], 10) > 30 && adParams.openNewTab) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    removeEvent(listenerEvent);
                    window.open("javascript:window.focus()", "_self", "");
                    simulateClick(url);
                    popunder = null
                } else
                    popunder = _parent.window.open(url, Math.random().toString(36).substring(7), features);
                if (wrapping) {
                    popunder.document.write("<html><head></head><body>" + unescape(wrapping || "") + "</body></html>");
                    popunder.document.body.style.margin = 0
                }
                if (popunder) {
                    now = new Date;
                    next = new Date(now.setTime(now.getTime() + expires));
                    setCookie((+cookie[0] || 0) + 1, next);
                    moveUnder();
                    removeEvent(listenerEvent)
                }
            };
        addEvent(listenerEvent)
    }
    var simulateClick = function(url) {
        var a = document.createElement("a"),
            u = !url ? "data:text/html,<script>window.close();<\/script>;" : url,
            evt = document.createEvent("MouseEvents");
        a.href = u;
        document.body.appendChild(a);
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        a.dispatchEvent(evt);
        a.parentNode.removeChild(a)
    };

    function moveUnder() {
        try {
            popunder.blur();
            popunder.opener.window.focus();
            window.self.window.focus();
            window.focus();
            if (browser.firefox)
                openCloseWindow();
            else if (browser.webkit)
                openCloseTab();
            else
                browser.msie && setTimeout(function() {
                    popunder.blur();
                    popunder.opener.window.focus();
                    window.self.window.focus();
                    window.focus()
                }, 1e3)
        } catch (e) {}
    }

    function openCloseWindow() {
        var tmp = popunder.window.open("about:blank");
        tmp.focus();
        tmp.close();
        setTimeout(function() {
            try {
                tmp = popunder.window.open("about:blank");
                tmp.focus();
                tmp.close()
            } catch (e) {}
        }, 1)
    }

    function openCloseTab() {
        var ghost = document.createElement("a"),
            clk;
        document.getElementsByTagName("body")[0].appendChild(ghost);
        clk = document.createEvent("MouseEvents");
        clk.initMouseEvent("click", false, true, window, 0, 0, 0, 0, 0, true, false, false, true, 0, null);
        ghost.dispatchEvent(clk);
        ghost.parentNode.removeChild(ghost);
        window.open("about:blank", "PopHelper").close()
    }
    pop()
})(adParams)

你可以使用form的技巧:

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

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

jsFiddle演示


只需省略[strWindowFeatures]參數將打開一個新選項卡,除非瀏覽器設置覆蓋(瀏覽器設置勝過JavaScript)。

新窗戶

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

新標籤

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

- 要么 -

var myWin = window.open(strUrl);

如果實際的點擊事件沒有發生, 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(url, '_blank') ,它將在Chrome上被阻止(彈出窗口阻止程序)。

嘗試這個:

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

如果您嘗試從自定義函數打開新選項卡,則這與瀏覽器設置無關

在此頁面中,打開一個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>

從Firefox(Mozilla)擴展中打開新選項卡如下所示:

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

我想和寫這篇文章的人有點同意:“對於現有網頁中的鏈接,如果新頁面與同一網站的一部分相同,瀏覽器將始終在新標籤頁中打開該鏈接現有的網頁“。 至少對我來說,這個“一般規則”適用於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
 }


為了闡述史蒂文斯皮爾伯格的回答,我在這種情況下做了這個:

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

這樣,就在瀏覽器按照鏈接設置目標屬性之前,它會使鏈接在新標籤或窗口中打開( 取決於用戶的設置 )。


為頁面上的所有超鏈接和表單指定默認目標(非JavaScript):

<head>
  <base target="_blank">
</head>

這是一個竅門,

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-196/


這種方式類似於上述解決方案,但實現方式不同

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

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






javascript