最近在使用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>