window.open新打開窗口與新開標簽頁


最近在使用window.open時忽略了一個細節問題:window.open新打開一個窗口,但是有時卻是新打開一個窗口有時打開一個新標簽頁。雖然對一般的需求來說,這個兩種情況都無所謂,但是對於那種有強烈區分的需求來說還是要注意的。那么怎么會出現這種不同的打開情況呢,這要從window.open方法的用法和不同瀏覽器來區分。


 1、window.open的用法容易忽視的細節

 window.open方法有三個參數:  

window.open(url, [name], [configuration])

其中:

  • url, 為要新打開頁面的url
  • name,為新打開窗口的名字,可以通過此名字獲取該窗口對象
  • configuration,為新打開窗口的一些配置項,比如是否有菜單欄、滾動條、長高等等信息

例如,新打開一個沒有菜單欄、標題欄、工具欄,但是有滾動條、狀態欄、地址欄且可伸縮窗口的方法調用如下:

window.open("index.html","newWindow","menubar=0,scrollbars=1, resizable=1,status=1,titlebar=0,toolbar=0,location=1");

 

以上只是簡要描述了window.open的方法,但是這個方法容易忽略的地方就是:新打開窗口名字可以是自定義的值,此外還可以是以下幾個值,與超鏈接a的target屬性值相同

窗口name值 描述
_blank 默認的,在新窗口打開鏈接的url
_self 在當前窗口打開鏈接url
_parent 在父窗口打開鏈接url
_top 在頂級窗口打開url
framename 在指定的框架中打開鏈接url

 

 

 

 

 

 

2、window.open打開新窗口還是打開新標簽頁

 調用window.open是打開新窗口,還是打開新標簽頁,其實沒有什么要緊關系,但是有些需求在這方面有很強的意願時,那就得區分一下了。具體的打開什么還是根據具體情況來定的,以下結論是經過本人測試得出的,若有不正確的地方,請大家批評指正。

1、window.open(url)或者window.open(url, name),其中name為_blank

  • 標准瀏覽器、IE9+是新標簽打開鏈接url
  • ie6-8是新窗口打開鏈接url

2、window.open(url, name),其中name為非_blank的其他4個值

  此時會會在指定窗口或者frame打開鏈接url

3、window.open(url, name, configration)

  只要配置了configration,所有瀏覽器都是新窗口打開鏈接url

 

3、使用window.open方法打開的窗口可能被攔截的替代方案

 現在有些瀏覽器為了安全起見,可能會阻止window.open打開的鏈接url,不管是以標簽還是以窗口打開。這時可能需要用戶進行瀏覽器設置允許彈新頁,讓用戶設置瀏覽器是極不可取的做法,尤其像電商類網站,那么有其他替代方案呢?

答案當然是有的,利用超鏈接打開的url是不會被攔截的可以實現這一點。具體做法是結合事件手動觸發機制。下面是  HTML:模擬鏈接被按下,在新標簽頁打開頁面,不使用window.open(可能被攔截) 這篇博客給的一個簡單的實例,這篇文章給出的事件分發機制是針對標准瀏覽器的:

html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Title</title>

    <script src="jquery.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#btn").click(function() {
            //var a = $('a')[0];
            var a = $("<a href='http://www.apple.com' target='_blank'>Apple</a>").get(0);
            
            var e = document.createEvent('MouseEvents');
            e.initEvent( 'click', true, true );
            a.dispatchEvent(e);
        });
    });
    
    </script>
</head>

<body>
    <input type="button" value="Go to Apple" id="btn">
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM