Client Side Techniques (Techniques XML Submission Form)

 checkbox checked

Submission Results:

Technology: Client Side Techniques 
Techniques Category: Script techniques 
Submitter's Name: Samuel Rinnetmäki 
Submitter's Email: samuel@iki.fi

<technique id="UNKNOWN">
<short-name>Popup links with minimal script  within markup</short-name>
<applies-to>
 <guideline idref="" />
 <success-criterion idref="UNKNOWN" />
</guideline

</applies-to>

<task>
<p>Scripting is separated from markup in popup window links</p>
</task>

<description>
Builds upon example http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/#js-uri



This technique is trying to separate structure (markup) and behaviour (script) from each other.  Links that should open in a new window, are not marked with target attribute and don't have onclick event handler.  They do, however, have  class value 'popup'.



A script function will go trough all links and attach an onclick handler to all links with class="popup".  The script could easily be modified to select only e.g. the links with absolute URIs.  Or, one could still keep the target attributes but enhance the 

</description>

<user-issues>
 <affects group="UNKNOWN" />
</user-issues>

<eg-group>
<description>
Two files: popup.js and test.html.  The JavaScript file popup.js contains most of the functionality, test.html is just a simple HTML page which includes the popup.js script and contains a single link with class="popup".

</description>

<code><![CDATA[
popup.js:

================================================

var options = 'height=400,width=400,scrollbars=yes,resizable=yes';



function openNewWindow(href, target, options) {

  var w = window.open(href, target, options);

  if (w.focus) {

    w.focus();

  }

  return (w ? false : true);

}



var links = document.getElementsByTagName('a');



function addOnClickHandlers() {

  for (var i=0; i<links.length; i++) {

    if (links[i].className == 'popup') {

      var href = links[i].href;

      var target = 'myPopUpWindowName';

      var func = function() { return openNewWindow(href, target, options);};

      links[i].onclick = func;

    }

  }

}



window.onload = addOnClickHandlers;

================================================







test.html (or any other name you prefer):

================================================

<html>

<title>Popup link proof of concept</title>

<script type="text/javascript" src="./popup.js">

</script>

<a href="register.php" class="popup">register here</a>

</html>

================================================
]]</code>

<ua-issues>

</ua-issues>
</eg-group>

<resources>
<see-also><br />&lt;p>
 <loc href="http://www.w3.org/TR/2004/WD-WCAG20-SCRIPT-TECHS-20041119/#js-uri" >javascript: URIs </loc>
</p><br /></see-also>
</resources>
</technique>

Additional Notes:

The example contains some fixed strings like the 'popup' class name, 'myPopUpWindowName' target window name and the options for the new window.  You may want to change these or choose a different approach altogether.

Received on Monday, 22 November 2004 16:03:03 UTC