(Site Identification)

'Eye' Focus: Web Support Tutorials

JavaScript: View Bookmarklet Source for DocProperties

Remote Bookmarklet Script Call

The bookmarklets we use on our site is actually a two part JavaScript. The JavaScript for the first part is actually a script that calls a remote file. This helps to keep the actual bookmark on your computer at a limited size, while it allows the actual script to be of any necessary size.

Another benefit for loading a remote file is that the bookmarklet can easily be maintained and updated, regardless of when it was bookmarked. The technique allows me to improve my bookmarklets and always have the current version when I use my bookmarks from any browser.

The drawback in using this technique is that Opera browsers do not support the remote file JavaScript loader. This means the script must be written all on one line, must be a limited maximum length, and will not be automatically updated when the script on the server is updated. We hope that Opera will soon support remote file loading with their JavaScripts.

The remote file loader for: DocProperties.js (skip code)

javascript:(function(){var s=document.createElement('script');s.setAttribute('src','http://www.melvinwallerjr.com/tutorial/scripts/bookmarklet/files/DocProperties.js');s.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(s);})();

Please keep in mind that the above Javascript call MUST be remain as one continuous line, and not contain any carriage returns. If you do not do this the bookmarklet will break and not be functional.


(to Top) The Remote Bookmarklet

Below is the source file that is loaded for this Bookmarklet. This file only exists within this web site and called by the above remote file loader. (skip code)

//  Title: Document Properties
// Origin: 'General page information' bookmarklet
// Author: www.yourhtmlsource.com/accessibility/bookmarklets.html (Ross Shannon)
// Tweaks: www.melvinwallerjr.com (JoeFlash)
(function() {
  window.onerror = null;
  var filesize = 0;
  var s = "\n\n<h1 style=\"margin:0px;\">Document Properties</h1>";
  s += "\n<div><small style=\"font-size:12px\"><a href=\"javascript:window.close();\">";
  s += "[close window]</a></small></div>";
  s += "\n\n<table border=\"1\" cellpadding=\"4\" cellspacing=\"0\"";
  s += " frame=\"box\" rules=\"rows\">";

  // TITLE
  pagetitle = ((window.document.title)? window.document.title : '(untitled)');
  s += "\n\n<tr valign=\"top\">\n<th>Title:</th>\n<td><strong>";
  s += pagetitle + "</strong></td>\n</tr>";

  // SOURCE
  s += "\n\n<tr valign=\"top\">\n<th>Source:</th>\n<td><kbd>" + window.location.href + "</kbd></td>\n</tr>";

  // FRAMES
  if (window.parent.frames.length > 0) {
    var f = 0;
    s += "\n\n<tr valign=\"top\"><th>Frames:</th>\n<td>" + window.parent.frames.length + "\n<ol>";
    for (i=0; i < window.parent.frames.length; i++) {
      if (window.parent.frames[i].location.length > 0) {
        s += "\n<li><strong><a href=\"" + window.parent.frames[i].location;
        s += "\">URL:</a></strong> <kbd>" + window.parent.frames[i].location + "</kbd></li>";
      } else {
        f++;
      }
    }
    s += "\n</ol>";
    if (f > 0) s += "\n<div>(contains one or more internal frame references)</div>";
    s += "</td>\n</tr>";
  }

  // DOMAIN
  s += "\n\n<tr valign=\"top\">\n<th>Domain:</th>\n<td><kbd>" + window.document.domain + "</kbd>";
  s += " <small><a href=\"http://uptime.netcraft.com/up/graph?site=";
  s += window.document.domain + "\">(Server Info.)</a></small></td>\n</tr>";

  if (window.document.referrer.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>Referrer:</th>";
    s += "\n<td><kbd>" + window.document.referrer + "</kbd></td>\n</tr>";
  }

  // COOKIE
  if (window.document.cookie.length > 0) {
    var dacookie = window.document.cookie;
    dacookie = dacookie.replace(/; /g,";");
    dacookie = dacookie.replace(/;/g,";<br />\n");
    s += "\n\n<tr valign=\"top\">\n<th>Cookie:</th>\n<td><kbd>" + dacookie + "</kbd></td>\n</tr>";
  }

  // HASH
  if (window.document.location.hash.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>Hash:</th>\n<td>" + window.document.location.hash + "</td>\n</tr>";
  }

  // CHARSET
  if (window.document.charset) {
    s += "\n\n<tr valign=\"top\">\n<th>CharSet:</th>\n<td>";
    s += ((window.document.charset)? window.document.charset : "<kbd style=\"background:#ccc\">&nbsp;(undefined)&nbsp;</kbd>") + "</td>\n</tr>";
  }

  // CREATED
  // if (window.document.fileCreatedDate) {
    // s += "\n<tr valign=\"top\">\n<th>Created:</th>\n<td>";
    // s += window.document.fileCreatedDate + "</td>\n</tr>";
  // }

  // LASTMODIFIED
  if (window.document.lastModified) {
    s += "\n\n<tr valign=\"top\">\n<th>Modified:</th>\n<td>";
    s += ((window.document.lastModified)? window.document.lastModified : "<kbd style=\"background:#ccc\">&nbsp;(unknown)&nbsp;</kbd>") + "</td>\n</tr>";
  }

  // FILESIZE
  if (window.document.fileSize > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>FileSize:</th><td>";
    s += (parseInt((parseInt(window.document.fileSize))/10.24)/100) + " KB</td>\n</tr>";
    filesize += parseInt(window.document.fileSize);
  }

  // LINKS
  if (window.document.links.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>Links:</th>\n<td>" + window.document.links.length + "<ol>";
    for (i=0; i < window.document.links.length; i++) {
      s += "\n<li><strong><a href=\"" + window.document.links[i].href + "\">Link:</a></strong> ";
      s += "<kbd>" + window.document.links[i].href + "</kbd></li>";
    }
    s += "\n</ol></td>\n</tr>";
  }

  // IMAGES
  if (window.document.images.length > 0) {
    s += "\n\n<tr valign=\"top\"><th>Images:</th>\n<td>" + window.document.images.length + "<ol>";
    for (i=0; i < window.document.images.length; i++) {
      s += "\n<li><img src=\"" + window.document.images[i].src + "\" align=\"top\" /><br />";
      s += "\n<strong class=\"b\">URL:</strong> <kbd>";
      s += window.document.images[i].src + "</kbd><br />";
      s += "\n<strong class=\"a\">Alt:</strong> ";
      s += ((window.document.images[i].alt.length > 0 && window.document.images[i].alt != " ")? window.document.images[i].alt : "<kbd style=\"background:#ccc\">&nbsp;(NULL)&nbsp;</kbd>") + "<br />";
      s += "<strong>Size:</strong> ";
      if (window.document.images[i].width < 1 || window.document.images[i].height < 1) {
        s += "<kbd style=\"background:#ccc\">&nbsp;(image has been hidden from view)&nbsp;</kbd>";
      } else {
        s += "<kbd>";
        if (parseInt(window.document.images[i].fileSize) >= 0) {
          s += (parseInt((parseInt(window.document.images[i].fileSize))/10.24)/100) + " KB, ";
          filesize += parseInt(window.document.images[i].fileSize);
        }
        s+= "width=" + window.document.images[i].width + ", height=" + window.document.images[i].height + "</kbd>";
      }
      s += ".</li>";
    }
    s += "\n</ol></td>\n</tr>";
  }

  // CSS
  if (window.document.styleSheets.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>CSS:</th>\n<td>" + window.document.styleSheets.length + "\n<ol>";
    for (i=0; i < window.document.styleSheets.length; i++) {
      var t = ((window.document.styleSheets[i].href)? window.document.styleSheets[i].href : "(inline)");
      s += "\n<li>";
      if (t != "(inline)") s += "<strong><a href=\"" + window.document.styleSheets[i].href + "\">URL:</a></strong>";
      else s += "<strong class=\"b\">URL:</strong>";
      s += " <kbd>" + t + "</kbd>";
      if (navigator.userAgent.toLowerCase().indexOf("gecko")==-1) {
        s += "</br />\n<strong class=\"a\">Media:</strong> <kbd>";
        s += ((window.document.styleSheets[i].media)? window.document.styleSheets[i].media : "(all)");
        s += "</kbd>";
      }
      s += "</li>";
    }
    s += "\n</ol></td>\n</tr>";
  }

  // SCRIPTS
  if (navigator.userAgent.toLowerCase().indexOf("gecko")==-1) {
  if (window.document.scripts.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>Scripts:</th>\n<td>" + window.document.scripts.length + "\n<ol>";
    for (i=0; i < window.document.scripts.length; i++) {
      var t = ((window.document.scripts[i].src)? window.document.scripts[i].src : "(inline)");
      s += "\n<li>";
      if (t != "(inline)") s += "<strong><a href=\"" + window.document.scripts[i].src + "\">URL:</a></strong> <kbd>";
      else s += "<strong class=\"b\">URL:</strong> <kbd>";
      s += ((window.document.scripts[i].src)? window.document.scripts[i].src : "(inline)") + "</kbd><br />";
      s += "\n<strong class=\"a\">Type:</strong> <kbd>";
      s += ((window.document.scripts[i].type)? window.document.scripts[i].type : "<span style=\"background:#ccc;font-family:monospace;\">&nbsp;(undefined)&nbsp;</span>");
      s += "</kbd></li>";
    }
    s += "\n</ol></td>\n</tr>";
  }
  }

  // FORMS
  if (window.document.forms.length > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>Forms:</th>\n<td>" + window.document.forms.length + "<ol>";
    for (i=0; i < window.document.forms.length; i++) {
      s += "\n<li><strong class=\"b\">Action:</strong> <kbd>";
      s += window.document.forms[i].action + "</kbd><br />";
      s += "\n<strong class=\"a\">Name:</strong> <kbd>";
      s += ((window.document.forms[i].name)? window.document.forms[i].name : "<kbd style=\"background:#ccc\">&nbsp;(none)&nbsp;</kbd>");
      s += "</kbd></li>";
    }
    s += "\n</ol></td>\n</tr>";
  }

  // DOCSIZE
  if (filesize > 0) {
    s += "\n\n<tr valign=\"top\">\n<th>DocSize:</th>\n<td><strong>Total Document Size: ";
    s += (parseInt((parseInt(filesize))/10.24)/100) + " KB</strong><br />";
    s += "\n<small><b>Excluding dependent files, such as:</b> javascripts (js),<br />\nmouseover images,"
    s += "cascading style sheets (css), flash,<br />\nbackground images, sounds, and streaming media content.</small>";
  }

  s += "\n\n</table>";

  // OUPTPUT
  var w=window.open("","w","");
  with (w.document) {
    open();
    write("<html><head>\n<title>Document Properties for: ");
    write(pagetitle + "</title>");
    write("\n<style><!--\n*{font-family:sans-serif;}\nh1{font-size:1.4em;color:#333;}");
    write("\nli{margin-top:6px;}");
    write("\nth{text-align:right;background:#fc9;}\nkbd{font-family:monospace;font-size:93%;}");
    write("\ntd{font-size:93%;background:#fff;}\n.a{color:#009;}\n.b{color:#900;}\n--></style>");
    write("\n</head><body bgcolor=\"#cc9966\" text=\"#000000\" link=\"#3333ff\" vlink=\"#990099\">");
    write("<div align=\"center\">" + s + "\n\n</div></body></html>");
    close();
  }
})();

For more information on browser bookmarklets, please have a look at our Bookmarklets Tutorial.


[Updated: Sunday, November 18, 2007]