Making the client side scripts work across different major browsers is not easy, especially when client debugging is not as convenient as more strongly typed programming languages. Try the following web page. It works fine on IE but on FireFox clicking the button will trigger nothing to happen.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>Untitled Page</title></head>
<script language="Javascript">
function document.onclick() {
alert(‘doc event’);
}
function foo() {
alert(‘foo’);
}
</script>
<body>
<input type="button" value="ok" onclick="foo();" />
</body>
</html> |
The page will silently fail and none of the event handlers works. Change the document.onclick handler assignment into the following and it works on both browsers. Tools like the Error Console on FireFox is very helpful in diagnosing these type of errors.
…
document.onclick = function () {
alert(‘doc event’);
}
… |
Web
cross-browser, javascript
In Javascript, using an element’s innerHTML property to dynamically edit its content provides much flexibility and convenience. But special care needs to be taken when using it, because it could bite you silently. Take one of my experiences as an example, it could break the event handlers of the child elements. Sample code as the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>innerHTML</title>
</head>
<body>
<hr /><div id="myd"></div><hr />
<script language="javascript">
function myaction()
{
alert("hello");
}
var d1 = document.createElement("div");
d1.onclick = myaction;
d1.innerHTML = "child div";
var d = document.getElementById("myd");
d.appendChild(d1);
//d.innerHTML += "parent div";
</script>
</body>
</html> |
This code works well and when you click on div, "hello" will pop up. However if you uncomment the last line of the JavaScript code. The message won’t pop up any more. innerHTML manipulates the content of the element as a string instead of DOM, so it might just break the underlying "wires" that hooks up the elements and their event handlers. So watch out, when any of the events stops working as expected, look for the evil "innerHTML" first.
Web
dom, javascript, Web
Optimize Your Scripts in DHTML Using the DEFER Attribute
When, for example, a perfect JavaScript function call foo() with the correct syntax is always mysteriously ignored, watch out for the side effect of script loading optimization. The root cause turned out to be that the script that contains the foo() function is loaded like the the following with "defer":
| <script src="foo.js" type="text/javascript" defer> </script> |
//foo.js
function foo() {
document.write("hello");
} |
Optimization never comes for free. Watch out for the side effects it may brings.
Web
defer, javascript, optimization
