Pages Menu
Categories Menu

Posted on 3 Oct, in Code, JavaScript | 0 comments

Creando con JavaScript un enlace inobstrusivo de “imprime esta página”

Creando con JavaScript un enlace inobstrusivo de “imprime esta página”

Roger Johansson de 456 Berea Street publicó un excelente artículo donde nos muestra crear con JavaScript un enlace inobstrusivo de “imprime esta página”. El sugiere utilizar este método ya que si el usuario visita la página con un navegador sin soporte para JavaScript o desactivado, seguirá apareciendo el enlace si se utiliza la función tradicional. De esta forma con la nueva función desaparece el enlace de “imprime esta página” si JavaScript está deshabilitado y de esta forma el usuario no tendrá confusión al oprimir un enlace que no funcionará.

Esta es la forma tradicional

  1. <a href="javascript:window.print()">Print this page</a>

La función que el sugiere y que puedes descargar aquí.

  1. var addPrintLink = {
  2. init:function(sTargetEl,sLinkText) {
  3. if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
  4. if (!document.getElementById(sTargetEl)) {return;} // Check that the target element actually exists
  5. if (!window.print) {return;} // Make sure the browser supports window.print
  6. var oTarget = document.getElementById(sTargetEl);
  7. var oLink = document.createElement('a');
  8. oLink.id = 'print-link'; // Give the link an id to allow styling
  9. oLink.href = '#'; // Make the link focusable for keyboard users
  10. oLink.appendChild(document.createTextNode(sLinkText));
  11. oLink.onclick = function() {window.print(); return false;} // Return false prevents the browser from following the link and jumping to the top of the page after printing
  12. oTarget.appendChild(oLink);
  13. }
  14. /* addEvent function removed from this listing*/
  15. };
  16. addPrintLink.addEvent(window, 'load', funct

[vía 456 Berea Sreet]