home :: technology :: coding :: firefox_javascript

Javascript Support for Firefox

Making your Javascript code work on both IE and Firefox isn’t hard. Here are a few modifications to IE-only code to make it work on Firefox:

Developer Extensions for Firefox

Firefox has revolutionized my web development process through a few key extensions. They are:

DOCTYPE

This isn’t a Javascript issue, but your web pages should have a DOCTYPE that forces both Firefox and IE to render them in strict mode (as opposed to quirks mode). This will help tremendously in making sure that CSS style sheet formatting looks the same in both browsers.

I use the 4.01 Transitional doctype for my pages. It allows deprecated elements, such as <font> to be used. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

document.all.xxx.innerText:

Sometimes, you want to change text displayed on a web page on-the-fly using Javascript. The IE-specific way to do this is using the innerText property. Here’s an example:

The text in question is surrounded by a span element with a defined id: 

<span id="coverage">Yes</span>

The following Javascript code will modify the text inside of the span: 

// Report whether this vehicle has coverage or not
if (veh_covs[veh]) {
  document.all.coverage.innerText = "Yes";
 }
else {
  document.all.coverage.innerText = "No";
 }

Replace it with this: 

// Report whether this vehicle has coverage or not
var cov = document.getElementById( 'coverage' );
if (veh_covs[veh]) {
  cov.firstChild.nodeValue = "Yes";
 }
else {
  cov.firstChild.nodeValue = "No";
 }

NOTE: The span must have *some* text defined inside of it. If the HTML looks like: 

<span id="glass_cov"></span>

then the firstChild object is null, and you won’t be able to change the nodeValue. Put an &nbsp; spacer inside the span instead.

getElementById() Javascript Warning

Occasionally, I’ll get the following message in my Javascript console: 

Warning: Element referenced by ID/NAME in the global scope.
Use W3C standard document.getElementById() instead.

The problem is, the message doesn’t refer to a specific line number in the code!

To debug the message, I usually wind up commenting out half of the HTML, until I realize that the offender is my <body onLoad="update_form( theform )"> statement. The update_form() javascript function repopulates CGI form entries like radio buttons and drop-down menu selections. IE doesn’t complain, but Firefox would prefer that I use document.theform instead.

The onChange() Event Handler

Note: In Firefox, the onChange() method is only called *after* you lose focus. This isn’t true for IE.

parentElement:

Use parentNode instead of parentElement. Here’s an example: 

// Check if any broker checkboxes are selected
var len = formObj.elements.length;
var i = 0;
while (i < len) {
   var e = formObj.elements[i];
   if (e.name.substring( 0, 3 ) == "${ $agg_prefix }") {
      if (e.checked) {
        any_broker = true;
        // Highlight this selection
        colorTR( (e.parentNode).parentNode, "#6699ff", "#ffffff" );
       }
      else {
        if (i % 2) {
          colorTR( (e.parentNode).parentNode, "#f0f0f0", "#000000" );
         }
        else {
          colorTR( (e.parentNode).parentNode, "#ffffff", "#000000" );
         }
       }
     }
    i++;
   }

top.opener

IE assumes that top.opener means top.opener.document. Firefox does not, so be explicit: 

if (${ $submit || 0 }) {
  top.opener.document.searchform.search_ou.value = '${ $chosen_ou }'; 
  top.opener.document.searchform.submit(); 
  top.close();
  return true;
 }

window.event

Firefox does not support the window.event property. Instead, pass 'event' into your functions: 

//
// Function to limit key presses for phone numbers,
// zip codes, letters, etc.  To use: 
// <input ... onKeyPress="return limit_keys( this, 'numeric', event )">
//
function limit_keys( selectObj, type, evt )
 {
  var keyCode = 0;
  var ret_val = true;

  if (evt) {
    keyCode = evt.keyCode || evt.which;
   }
  else {
    // The old version of this file did not use the evt parameter
    // and would only work under IE.
    keyCode = window.event.keyCode;
   }

  // Allow special characters: BACKSPACE, TAB, RETURN, LEFT ARROW,
  // RIGHT ARROW to go through
  if ((keyCode == 8) || (keyCode == 9) || (keyCode == 13)
   || (keyCode == 37) || (keyCode == 39)) {
    return (ret_val);
   }

  if (type == ‘phone’) {
    // Numeric values and punctuation are OK
    ret_val = test_keycode( ‘0123456789()-.’, keyCode );
   }
  else if (type == ‘alphanum’) {
    ret_val = ((keyCode >= 48) && (keyCode <= 57))
            || ((keyCode >= 65) && (keyCode <= 90))
            || ((keyCode >= 97) && (keyCode <= 122));
   }
  else if (type == 'numeric') {
    // Simply test for a numeric value
    ret_val = ((keyCode >= 48) && (keyCode <= 57));
   }

  return (ret_val);

 } // End of limit_keys()

window.status

By default, Firefox does not allow scripts to change the status bar. To enable this, select the Tools -> Options menu choice. Press the Advanced… button beside Enable JavaScript, and check the Change status bar text box.

Last Updated: Thu, 17 Nov 2005

Feedback

quest wrote at 2009-04-05 12:58:

window.event does not work (FF 3.0.8).

Charlie wrote at 2014-02-19 18:00:

Trying to write a PAC file, but it seems my version of firefox doesnt support && (IE does). || (shExpMatch(url, "*/element.js*") && dnsDomainIs(host, "translate.google.com")) Is there any alternatives to encode this?

Name:

Email or URL:

Comments: