online - javascript شرح




افتح عنوان URL في علامة تبويب جديدة(وليس نافذة جديدة) باستخدام JavaScript (17)

window.open لا يمكن فتح النوافذ المنبثقة بشكل موثوق في علامة تبويب جديدة في جميع المتصفحات

تقوم المتصفحات المختلفة بتنفيذ سلوك window.open بطرق مختلفة ، خاصة فيما يتعلق بتفضيلات متصفح المستخدم. لا يمكنك أن تتوقع أن يكون السلوك نفسه لـ window.open صحيحًا عبر كل من Internet Explorer و Firefox و Chrome ، نظرًا للطرق المختلفة للتعامل مع تفضيلات متصفح المستخدم.

على سبيل المثال ، يمكن لمستخدمي Internet Explorer (11) اختيار فتح النوافذ المنبثقة في نافذة جديدة أو علامة تبويب جديدة ، لا يمكنك إجبار مستخدمي Internet Explorer 11 على فتح النوافذ المنبثقة بطريقة معينة من خلال window.open ، كما تمت الإشارة إليها في إجابة Quentin .

بالنسبة إلى مستخدمي Firefox (29) ، فإن استخدام window.open(url, '_blank') يعتمد على تفضيلات علامة تبويب المتصفح ، على الرغم من أنه لا يزال بإمكانك إجبارهم على فتح النوافذ المنبثقة في نافذة جديدة عن طريق تحديد العرض والارتفاع (راجع "ماذا عن كروم؟ "القسم أدناه).

برهنة

انتقل إلى إعدادات المتصفح الخاص بك وقم بتكوينه لفتح النوافذ المنبثقة في نافذة جديدة.

إنترنت إكسبلورر (11)

اختبار الصفحة

بعد إعداد 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) مع تعيين تفضيل علامة التبويب الخاص به إلى إطارات جديدة ، ومشاهدة نفس النتائج.

ماذا عن كروم؟ فإنه ينفذ window.open مختلف عن إنترنت إكسبلورر (11) وفايرفوكس (29).

لست متأكدًا بنسبة 100٪ ، ولكن يبدو أن Chrome (إصدار 34.0.1847.131 m ) لا يبدو أنه يحتوي على أي إعدادات يمكن للمستخدم استخدامها لاختيار فتح النوافذ المنبثقة في نافذة جديدة أو في علامة تبويب جديدة (مثل فايرفوكس و 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 ، نظرًا للطرق المختلفة للتعامل مع تفضيلات متصفح المستخدم.

قراءة إضافية

أحاول فتح URL في علامة تبويب جديدة ، بدلاً من النافذة المنبثقة. لقد رأيت أسئلة ذات صلة حيث ستبدو الردود كما يلي:

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

ولكن لم يعمل أي منهم لي ، ما زال المتصفح يحاول فتح نافذة منبثقة.



إذا كنت ترغب فقط في فتح الروابط الخارجية (الروابط التي تنتقل إلى مواقع أخرى) ، فإن هذا الجزء من 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') ، فسيتم حظره (مانع النوافذ المنبثقة) على Chrome.

جرب هذا:

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

بطريقة ما ، يمكن 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)

حدد هدفًا افتراضيًا لجميع الارتباطات التشعبية والنماذج الموجودة على الصفحة (غير JavaScript):

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

سأوافق إلى حد ما مع الشخص الذي كتب (تم إعادة صياغته هنا): "بالنسبة إلى ارتباط في صفحة ويب موجودة ، سيفتح المتصفح دائمًا الرابط في علامة تبويب جديدة إذا كانت الصفحة الجديدة جزءًا من نفس موقع الويب مثل صفحة الويب الحالية ". بالنسبة لي ، على الأقل ، تعمل هذه "القاعدة العامة" في Chrome و Firefox و Opera و IE و Safari و SeaMonkey و Konqueror.

على أي حال ، هناك طريقة أقل تعقيدًا للاستفادة مما قدمه الشخص الآخر. على افتراض أننا نتحدث عن موقع الويب الخاص بك ("thissite.com" أدناه) ، حيث تريد التحكم في ما يفعله المستعرض ، ثم ، أدناه ، تريد أن يكون "privatepage.htm" فارغًا ، لا 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
 }

سيؤدي حذف المعلمات [strWindowFeatures] فقط إلى فتح علامة تبويب جديدة ، ما لم تتخطى إعدادات المستعرض (إعداد المتصفح يفوق جافا سكريبت).

نافذة جديدة

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

علامة تبويب جديدة

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

- أو -

var myWin = window.open(strUrl);

لا يمكن لأي شيء يمكن أن يفعله المؤلف أن يختار فتحه في علامة تبويب جديدة بدلاً من نافذة جديدة. هو تفضيل المستخدم .

اقترح CSS3 target-new ، ولكن تم التخلي عن المواصفات .

العكس ليس صحيحا. عن طريق تحديد أبعاد الإطار في الوسيطة الثالثة window.open ، يمكنك تشغيل نافذة جديدة عندما يكون التفضيل لعلامات التبويب.


لن يتم فتح window.open() في علامة تبويب جديدة إذا لم يحدث على حدث النقر الفعلي. في المثال ، يتم فتح عنوان URL على حدث النقرة الفعلي. سيعمل هذا بشرط أن يكون لدى المستخدم إعدادات مناسبة في المستعرض .

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

وبالمثل ، إذا كنت تحاول القيام بمكالمة Ajax داخل وظيفة النقر وترغب في فتح نافذة على النجاح ، تأكد من قيامك بإجراء مكالمة Ajax باستخدام مجموعة الخيارات async : false .


هذا العمل بالنسبة لي ، فقط منع هذا الحدث ، إضافة رابط إلى tag <a> ثم تشغيل حدث النقر على تلك 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>

هذه الطريقة مشابهة للحل أعلاه ولكنها تنفذ بشكل مختلف

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

ولإعداد جواب ستيفن سبيلبرغ ، قمت بذلك في مثل هذه الحالة:

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

بهذه الطريقة ، فقط قبل أن يتبع المتصفح الرابط ، أقوم بإعداد السمة الهدف ، لذلك سيجعل الرابط مفتوحًا في علامة تبويب أو نافذة جديدة ( يعتمد على إعدادات المستخدم ).


يؤدي فتح علامة تبويب جديدة من داخل ملحق Firefox (Mozilla) إلى ما يلي:

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

يمكنني استخدام ما يلي ويعمل بشكل جيد للغاية !!!

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

هذا لا علاقة له بإعدادات المتصفح إذا كنت تحاول فتح علامة تبويب جديدة من وظيفة مخصصة.

في هذه الصفحة ، افتح وحدة تحكم جافا سكريبت واكتب:

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 على 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(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