information - make a browser in javascript




打開新瀏覽器窗口的最佳方法是什麼? (7)

也許我誤解了一些東西,但為什麼你不想使用target =“_ blank”? 這就是我這樣做的方式。 如果您正在尋找最兼容的,那麼任何類型的JavaScript都會被淘汰,因為您無法確定客戶端是否啟用了JS。

我知道大多數鏈接應由最終用戶決定如何打開,但我們不能否認有時你幾乎“必須”強行進入一個新窗口(例如以表格形式維護數據)在當前頁面上)。

我想知道的是,在新的瀏覽器窗口中打開鏈接的“最佳”方式的共識是什麼。

我知道<a href="url" target="_blank">已經出局了。 我也知道<a href="#" onclick="window.open(url);">因各種原因而不理想。 我還嘗試用<span onclick="window.open(url);">類的東西完全替換錨點,然後將SPAN設置為看起來像鏈接。

我傾向於的一個解決方案是<a href="url" rel="external">並使用JavaScript將所有目標設置為標記為“外部”的錨點上的'_blank'。

還有其他想法嗎? 什麼更好? 我正在尋找最符合XHTML標準且最簡單的方法。

更新:我說target =“_ blank”是不是沒有,因為我已經在幾個地方讀過目標屬性將逐步退出XHTML。


如果您使用任何嚴格的doctype或即將到來的真正的xhtml風格,不允許目標...

使用transitional,無論是HTML4.01還是XHTML1,您都可以使用Damirs解決方案,儘管它無法實現window.open()中必需的windowName屬性:

在簡單的HTML中:

<a href="..." target="_blank" onclick="window.open(this.href, 'newWin'); return false;">link</a>

但是,如果您使用嚴格的doctypes之一,那麼打開鏈接的唯一方法就是使用沒有target-attribute的此解決方案...

- 順便說一句,非js瀏覽器的數量經常被誤算,查找計數器數字是指非常不同的數字,我想知道有多少非js瀏覽器是爬蟲等等! - )


我正在使用你提出的最後一種方法。 我添加rel =“external”或類似的東西然後使用jQuery迭代所有鏈接並為它們分配一個單擊處理程序:

$(document).ready(function() {
  $('a[rel*=external]').click(function(){
    window.open($(this).attr('href'));
    return false; 
  });
});

我發現這是最好的方法,因為:

  • 語義非常清楚:你有一個外部資源的鏈接
  • 它符合標準
  • 它優雅地降級(你有一個非常簡單的鏈接與常規href屬性)
  • 它仍然允許用戶中間點擊鏈接,如果他們願意,可以在新標籤中打開它

我用這個......

$(function() {
  $("a:not([href^='"+window.location.hostname+"'])").click(function(){
    window.open(this.href);
    return false;
  }).attr("title", "Opens in a new window");
});

不要強制在新窗口中打開鏈接。

反對的原因:

  • 它侵犯了最不驚訝的規則。
  • 後退按鈕不起作用,用戶不太可能知道原因。
  • 選項卡式瀏覽器會發生什麼? 新標籤頁或新窗口? 無論哪個發生,如果你混合標籤和窗口,它是你想要的嗎?

我總是聽到打開新窗口的原因是用戶不會離開該網站。 但是可以肯定的是,我永遠不會回到一個讓我煩惱的網站。 如果該網站取消了我的控制權,那將是一個很大的煩惱。

一種方法可能是,您提供兩個鏈接,一個是正常的,另一個是在新窗口中打開它。 在普通鏈接後添加第二個帶小符號。 這樣,您網站的用戶就可以控制他們想要點擊的鏈接。


這是我為jQuery編寫的插件

 (function($){  
  $.fn.newWindow = function(options) {       
    var defaults = {
        titleText: 'Link opens in a new window'     
    };

     options = $.extend(defaults, options);

     return this.each(function() {  
       var obj = $(this);

       if (options.titleText) {        
           if (obj.attr('title')) {
                     var newTitle = obj.attr('title') + ' (' 
                                                + options.titleText + ')';
           } else {
                    var newTitle = options.titleText;
           };              
           obj.attr('title', newTitle);            
       };          

       obj.click(function(event) {
          event.preventDefault();  
          var newBlankWindow = window.open(obj.attr('href'), '_blank');
          newBlankWindow.focus();
        });     
       });    
  };  
 })(jQuery); 

示例用法

$('a[rel=external]').newWindow();

您還可以通過傳遞一些選項來更改或刪除標題文本

更改標題文本的示例:

$('a[rel=external]').newWindow( { titleText: 'This is a new window link!' } );

完全刪除它的示例

$('a[rel=external]').newWindow( { titleText: '' } );

<a href="http://www.google.com" onclick="window.open(this.href); return false">

如果用戶已禁用JS,這仍將打開鏈接(儘管在同一窗口中)。 否則它的工作方式與target = blank完全相同,並且它很容易使用,因為您只需要將onclick函數(可能通過使用JQuery)附加到所有普通標記。





browser