javascript - 新規ウィンドウ - window.open_blank




JavaScriptを使用して新しいタブで新しいウィンドウではなくURLを開く (18)

私はポップアップウィンドウではなく、新しいタブでURLを開こうとしていURL 。 私は、回答が次のようになる関連する質問を見た:

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

しかし、それらのどれも私のために働いていない、ブラウザはまだポップアップウィンドウを開こうとした。


window.openは、すべてのブラウザの新しいタブで確実にポップアップを開くことができません

異なるブラウザは window.open の動作を さまざまな方法 で実装し ます。特に、ユーザーのブラウザの設定については特に注意してください。 Internet Explorer、Firefox、およびChromeのすべてで、 window.open動作が同じであることは期待できません。ユーザーのブラウザ設定を処理する方法が異なるためです。

たとえば、Internet Explorer(11)のユーザーは、新しいウィンドウまたは新しいタブでポップアップを開くことができますが、 Quentinの答えで暗示されているように、 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について これは、Internet Explorer(11)およびFirefox(29)とは異なり、 window.open実装します。

私は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 の動作 をユーザーのブラウザ設定に応じて別々に 実装 します。 Internet Explorer、Firefox、およびChromeのすべてで、 window.open動作が同じであることは期待できません。ユーザーのブラウザ設定を処理する方法が異なるためです。

追加の読書


この質問に対する回答があり、それは否定ではありません。

私は簡単な回避策を見つけました:

ステップ1:目に見えないリンクを作成する:

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

ステップ2:次のリンクをプログラムでクリックします。

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

どうぞ! 私のために魅力を働かせます。


Firefox(Mozilla)の拡張機能から新しいタブを開くと、次のようになります:

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

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

この作品は私のためだけに、イベントを防ぐために、 <a> tag URLを追加してから、そのtag clickイベントをトリガーします。

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>

この方法は上記の解決法に似ていますが、異なる方法で実装されています

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

これはハックかもしれませんが、Firefoxでは3番目のパラメータ 'fullscreen = yes'を指定すると新しいウィンドウが開きます。

例えば、

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

実際にはブラウザの設定を上書きしているようです。


どういうわけか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)

または、リンク要素を作成してクリックするだけです

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

これは、ポップアップブロッカーによってブロックされるべきではありません...うまくいけば。


スティーブン・スピルバーグの答えを詳述するために、私はそのような場合にこれをしました:

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

この方法で、ブラウザがリンクをたどる直前にターゲット属性を設定しているので、新しいタブまたはウィンドウでリンクを開くことになります( ユーザーの設定によって異なります )。


作成者が行うことは、新しいウィンドウではなく新しいタブで開くことを選択できます。 これはユーザーの好みです。

CSS3はtarget-new提案しましたが、仕様は放棄されました

そのは真実ではない。 window.openの3番目の引数にウィンドウのディメンションを指定すると、タブの設定が新しい場合に新しいウィンドウがトリガーされます。


外部リンク(他のサイトに移動するリンク)だけを開く場合は、JavaScript / jQueryのこのビットがうまくいきます:

$(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(url, '_blank').focus();

私は書いた人(ここで言い換えれば)といくらか同意するつもりです: "既存のWebページのリンクについては、新しいページが同じWebサイトの一部である場合、ブラウザは常に新しいタブでリンクを開きます既存のウェブページ。 私にとっては、少なくとも、この "一般ルール"はChrome、Firefox、Opera、IE、Safari、SeaMonkey、Konquerorで動作します。

とにかく、他人が提示したことを利用するための複雑ではない方法があります。 私たちがあなた自身のウェブサイト(以下「thissite.com」)を話しているとしたら、ブラウザが何をしているのかを制御したいところで、「specialpage.htm」をEMPTYにしたい、サーバーからデータを送信する時間を節約できます)。

 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
 }

要素にロードしようとしているだけの場合は、これを試してみてください。 ページが読み込まれると、正しい属性を持つターゲットプロパティが追加されます。

$(your_element_here).prop( 'target'、 '_blank');


リンクが同じドメイン(同じウェブサイト上)にある場合、ブラウザは常に新しいタブでリンクを開きます。リンクが他のドメインにある場合、ブラウザの設定に応じて新しいタブ/ウィンドウで開きます。

したがって、これに応じて、以下を使用することができます。

<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ターゲット(新しいタブで開く)を使って同じWebサイトで新しいウィンドウを開き、その新しいウィンドウ内で目的のWebサイトを開きます。







javascript