öffnen - javascript window.open popup




Öffnen Sie eine URL in einem neuen Tab(und nicht in einem neuen Fenster) mit JavaScript (17)

Ich versuche, eine URL in einem neuen Tab im Gegensatz zu einem Popup-Fenster zu öffnen. Ich habe ähnliche Fragen gesehen, bei denen die Antworten etwa wie folgt aussehen würden:

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

Aber keiner von ihnen funktionierte für mich, der Browser versuchte immer noch ein Popup-Fenster zu öffnen.


window.open Kann window.open nicht zuverlässig in einem neuen Tab in allen Browsern öffnen

Verschiedene Browser implementieren das Verhalten von window.open auf unterschiedliche Weise, insbesondere in Bezug auf die Browsereinstellungen eines Benutzers. Sie können nicht erwarten, dass window.open in allen Internet Explorer-, window.open und Chrome- window.open dasselbe Verhalten window.open , da die Browsereinstellungen eines Benutzers unterschiedlich window.open werden.

Beispielsweise können Benutzer von Internet Explorer (11) Popups in einem neuen Fenster oder einem neuen Tab öffnen. Sie können Internet Explorer 11-Benutzer nicht zwingen, Popups in einer bestimmten Weise über window.open zu öffnen , wie in Quentins Antwort angedeutet.

Wie bei Firefox (29) Benutzern hängt die Verwendung von window.open(url, '_blank') von den Voreinstellungen ihres Browsers ab, obwohl Sie sie immer noch zwingen können, Popups in einem neuen Fenster zu öffnen, indem Sie eine Breite und Höhe window.open(url, '_blank') (siehe "Was ist? Chrome? "Abschnitt unten).

Demonstration

Gehe zu den Einstellungen deines Browsers und konfiguriere es, um Popups in einem neuen Fenster zu öffnen.

Internet Explorer (11)

Testseite

Nachdem Sie den Internet Explorer (11) eingerichtet haben, um Popups in einem neuen Fenster zu öffnen, wie oben gezeigt, verwenden Sie die folgende Testseite, um window.open zu testen:

<!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>

Beachten Sie, dass die Popups in einem neuen Fenster und nicht in einem neuen Tab geöffnet werden .

Sie können diese oben genannten Snippets auch in Firefox (29) testen, wobei die Tab-Voreinstellung auf neue Fenster eingestellt ist und dieselben Ergebnisse angezeigt werden.

Was ist mit Chrome? Es implementiert window.open Anders als Internet Explorer (11) und Firefox (29).

Ich bin mir nicht 100% ig sicher, aber es sieht so aus, als ob Chrome (Version 34.0.1847.131 m ) keine Einstellungen zu haben scheint, mit denen der Benutzer wählen kann, ob er Popups in einem neuen Fenster oder einem neuen Tab öffnet (z Firefox und Internet Explorer haben). Ich habe die Chrome-Dokumentation zur Verwaltung von Pop-ups überprüft, aber nichts zu dieser Sache erwähnt.

Auch hier scheinen verschiedene Browser das Verhalten von window.open unterschiedlich zu implementieren . In Chrome und Firefox wird durch die Angabe einer Breite und Höhe ein Popup erzwungen, selbst wenn ein Benutzer Firefox (29) so eingestellt hat, dass neue Fenster in einem neuen Tab geöffnet werden (wie in den Antworten zu JavaScript in einem neuen Fenster und nicht in Tab geöffnet ) :

<!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>

Dasselbe Code-Snippet oben wird jedoch immer eine neue Registerkarte in Internet Explorer 11 öffnen, wenn Benutzer Registerkarten als ihre Browsereinstellungen festlegen und nicht einmal eine Breite und Höhe angeben, wird ein neues Fenster-Popup für sie erzwungen.

Das Verhalten von window.open in Chrome scheint zu sein, Popups in einem neuen Tab zu öffnen, wenn sie in einem onclick Ereignis verwendet werden, um sie in neuen Fenstern zu öffnen, wenn sie von der Browser-Konsole aus verwendet werden in neuen Fenstern, wenn sie mit einer Breite und einer Höhe angegeben werden.

Zusammenfassung

Verschiedene Browser implementieren das Verhalten von window.open in Bezug auf die Browsereinstellungen des window.open unterschiedlich. Sie können nicht erwarten, dass window.open in allen Internet Explorer-, window.open und Chrome- window.open dasselbe Verhalten window.open , da die Browsereinstellungen eines Benutzers unterschiedlich window.open werden.

Zusätzliches Lesen


Das Öffnen eines neuen Tabs innerhalb einer Firefox (Mozilla) Erweiterung sieht folgendermaßen aus:

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

Dies funktioniert für mich, einfach das Ereignis zu verhindern, die URL zu einem <a> tag hinzufügen und dann das Click-Ereignis auf diesem tag auslösen.

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>

Dies könnte ein Hack sein, aber in Firefox, wenn Sie einen dritten Parameter angeben, 'fullscreen = yes', öffnet sich ein neues Fenster.

Beispielsweise,

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

Es scheint tatsächlich die Browsereinstellungen zu überschreiben.


Eine interessante Tatsache ist, dass die neue Registerkarte nicht geöffnet werden kann, wenn die Aktion nicht vom Benutzer aufgerufen wird (durch Klicken auf eine Schaltfläche oder etwas) oder wenn sie zum Beispiel asynchron ist und nicht in der neuen Registerkarte geöffnet wird:

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

Je nach Browsereinstellungen kann dies jedoch in einem neuen Tab geöffnet werden:

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

Einzeiler:

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

oder

Mit jQuery verwende ich diesen:

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

Es erstellt ein virtuelles Element, gibt es target="_blank" so dass es in einem neuen Tab öffnet, gibt es die richtige url href und klickt dann darauf.

Und wenn Sie möchten, können Sie basierend darauf eine Funktion erstellen:

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

und dann kannst du es benutzen wie:

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

Für ein Nicht-jQuery- Szenario würde die Funktion folgendermaßen aussehen:

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

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

Ich benutze folgendes und es funktioniert sehr gut !!!

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


Irgendwie kann eine website es tun. (Ich habe nicht die Zeit, es aus diesem Durcheinander zu extrahieren, aber das ist der Code)

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)

Nichts, was ein Autor tun kann, kann in einem neuen Tab statt in einem neuen Fenster geöffnet werden. Es ist eine Benutzereinstellung .

CSS3 schlug target-new , aber die Spezifikation wurde aufgegeben .

Das Gegenteil ist nicht wahr; window.open Sie im dritten Argument von window.open Dimensionen für das Fenster window.open , können Sie ein neues Fenster auslösen, wenn die Voreinstellung für Registerkarten gilt.


Sie können einen Trick mit 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 Demo


Um Steven Spielbergs Antwort zu erläutern, tat ich das in einem solchen Fall:

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

Auf diese Weise, kurz bevor der Browser dem Link folgt, setze ich das Zielattribut, so dass der Link in einem neuen Tab oder Fenster geöffnet wird ( abhängig von den Benutzereinstellungen ).


Wenn Sie [strWindowFeatures] -Parameter einfach weglassen, wird eine neue Registerkarte geöffnet, sofern die Browsereinstellung nicht überschrieben wird (die Browsereinstellung übertrumpft JavaScript).

Neues Fenster

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

Neue Registerkarte

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

-- oder --

var myWin = window.open(strUrl);

Wenn Sie nur die externen Links (Links, die zu anderen Sites gehen) öffnen möchten, funktioniert dieses Bit von JavaScript / jQuery gut:

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

window.open() wird nicht in einer neuen Registerkarte geöffnet, wenn dies beim aktuellen window.open() nicht geschieht. Im Beispiel wird die URL für das aktuelle Klickereignis geöffnet. Dies funktioniert, vorausgesetzt der Benutzer verfügt über entsprechende Einstellungen im Browser .

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

Wenn Sie versuchen, einen Ajax-Aufruf innerhalb der Click-Funktion auszuführen und ein Fenster mit Erfolg zu öffnen, müssen Sie sicherstellen, dass Sie den Ajax-Aufruf mit der Option async : false ausführen.


Dies hat nichts mit Browsereinstellungen zu tun, wenn Sie versuchen, eine neue Registerkarte aus einer benutzerdefinierten Funktion zu öffnen.

Öffnen Sie auf dieser Seite eine JavaScript-Konsole und geben Sie Folgendes ein:

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

Und es wird versuchen, ein Popup unabhängig von Ihren Einstellungen zu öffnen, da der "Klick" von einer benutzerdefinierten Aktion stammt.

Um sich wie ein Mausklick auf einen Link zu verhalten, müssen Sie @ spirinvladimirs Rat befolgen und ihn wirklich erstellen:

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

Hier ist ein vollständiges Beispiel (versuchen Sie es nicht mit jsFiddle oder ähnlichen Online-Editoren, da Sie von dort nicht auf externe Seiten umleiten können):

<!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(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