テクニック SCR24:利用者の要求に応じて新しいウィンドウを開くために、プログレッシブエンハンスメントを使用する

マークアップ:

スクリプトはドキュメントの head 要素内に組み込まれており、リンクにはスクリプトのフックとなる id 属性がある。

<script src="popup.js"></script>
...
<a href="help.html" id="newwin">Show Help</a>

スクリプト:

window.onload = addHandlers;

function addHandlers(){
  var objAnchor = document.getElementById('newwin');
  
  if (objAnchor){
    objAnchor.firstChild.data = objAnchor.firstChild.data + ' (opens in a new window)';
    objAnchor.onclick = function(event){return launchWindow(this, event);}
    // UAAG requires that user agents handle events in a device-independent manner
    // but only some browsers do this, so add keyboard event to be sure
    objAnchor.onkeypress = function(event){return launchWindow(this, event);}
  }
}
   
   function launchWindow(objAnchor, objEvent)
   {
     var iKeyCode, bSuccess=false;
   
     // If the event is from a keyboard, we only want to open the
     // new window if the user requested the link (return or space)
     if (objEvent && objEvent.type == 'keypress')
     {
       if (objEvent.keyCode)
         iKeyCode = objEvent.keyCode;
       else if (objEvent.which)
         iKeyCode = objEvent.which;
   
       // If not carriage return or space, return true so that the user agent
       // continues to process the action
       if (iKeyCode != 13 && iKeyCode != 32)
         return true;
     }
   
     bSuccess = window.open(objAnchor.href);
   
     // If the window did not open, allow the browser to continue the default
     // action of opening in the same window
     if (!bSuccess)
       return true;
   
     // The window was opened, so stop the browser processing further
     return false;
   }