addEventListener

Stel we willen met javascript een stukje HTML toevoegen aan de pagina:

<a href="#" onclick="print()">Print</a>

Dit is volgens de webrichtlijnen niet toegestaan in de HTML. Een bezoeker die geen javascript tot de beschikking heeft kan namelijk niets met deze link. Volgens de richtlijnen moet er dus een oplossing zijn. De oplossing voor de print actie bestaat niet. De oplossing is in dat geval het weglaten van de HTML en deze via Javascript aan de DOM toevoegen.

function showPrintDialog() {
print();
}

function makePrintPageLink(){

// create our needed html
printer = document.createElement('a');
printer.setAttribute('href','#');

// Check for browsertype. First W3C, second IE
if (printer.addEventListener) {
printer.addEventListener('click', showPrintDialog, false);
}
else if (printer.attachEvent) {
printer.attachEvent('onclick', showPrintDialog);
}
// Add some text to our new link
printer.appendChild(document.createTextNode('Print'));

// Find the place to insert the html
var prints = document.getElementById('document-action-print');

// Make the place visible and insert the html
prints.style.display = "block";
prints.appendChild(printer);
}

registerPloneFunction(makePrintPageLink);

In de bovenstaande code maken we gebruik van de addEventListener om te zien of bepaalde functionaliteit bestaat. Als dat het geval is, voeren we code uit. Zoniet, dan proberen we of attachEvent beschikbaar is. Deze oplossing is veilig voor o.a. Firefox en IE.

Het kan binnen Plone nog iets mooier met behulp van:

Dit is een functie die om de bovengenoemde browsercheck is heengeschreven. De functie is gedefinieerd in register_function.js.

// Check for browsertype. First W3C, second IE
if (printer.addEventListener) {
printer.addEventListener('click', showPrintDialog, false);
}
else if (printer.attachEvent) {
printer.attachEvent('onclick', showPrintDialog);
}
// Check for browsertype using Plone buildin solution and perform print function.
registerEventListener(printer, 'click', showPrintDialog);