I did some web coding recently and was intensively trying to use some Javascript and HTML5 features to dynamically manipulate content within a webpage. From past experiences, this manipulation can be done in some ways by using getDocumentById as well as innerText.

However, this doesn’t seem to work too well with FireFox. Mucking around abit discovers that Firefox doesn’t seem to use innerText. Instead, it uses textContent. So.

document.getElementById(“change”).innerText = “someString”;

becomes

document.getElementById(“change”). textContent = “someString”;

Further use of window.localStorage uncovered that while a code like the below works for Safari, it doesn’t work for FireFox.

window.localStorage.key = value;
value = window.localStorage.key;

This needs to be changed to the following in Firefox.

window.localStorage.setItem(“key”,value);
value = window.localStorage.getItem(“key”);

Reloading of iFrame contents are also affected. While the following works in Safari, it doesn’t work in FireFox

// where the iFrame name is upload
document.upload.window.location.reload();

In Firefox this has to be changed to

// where the iFrame id name is upload
document.getElementById(“upload”).contentDocument.location = “target.html”;

Just performing a reload on the location results in Firefox continually re-submitting the form in the iFrame. Changing the source works better for Firefox and also works well in Safari.

While this didn’t cause me too much pain, but it is certainly good to begin changing the practice as Safari supports the Firefox methods, but not the other way round.

In short

• innerText becomes textContent.
• window.localStorage.key = value becomes window.localStorage.setItem(‘key’,value).
• Instead of referencing iFrames using names, use id and use contentDocument to obtain the object to the iFrame.

Hope this helps anyone with the same pain as i have.