My Programming Tricks

Caveman Blogger

I always wonder how the location of the placement of onload event listener will affect the behavior of my Javascript on various browsers. I use the following codes to check out this small doubt of me:

<html>
<head>
<script>
window.onload = function() {
alert("window.onload in the head");
}
</script>
</head>

<body onload="alert('body begins onload')">
<br><br><br><br><br><br>
<script>
alert("body ends onload");
</script>
</body>
</html>

The following are the results of the test on various browser according to the priority of the alert message:
Chrome: "body ends onload", "window.onload in the head", "body begins onload"
Safari/Firefox/IE: "body ends onload", "body begins onload"

I then add an extra onload listener in the body to see if it changes the result. The codes are as follows:

<html>
<head>
<script>
window.onload = function() {
alert("window.onload in the head");
}
</script>
</head>

<body onload="alert('body begins onload')">
<script>
window.onload = function() {
alert("window.onload in the body");
}
</script>
<br><br><br><br><br><br> <script>
alert("body ends onload");
</script>
</body>
</html>

The following are the results of the test on various browser for this new tweak:
Chrome: "body ends onload", "body begins onload", "window.onload in the body"
Safari/Firefox/IE: "body ends onload", "window.onload in the body"

CONCLUSION:
The Chrome browser behave slightly different from the pack. If the window.onload listener is in the head, it will have higher precedence over the onload in the body tag. If the window.onload is in the body, it will have less priority than the one in the body tag with the one in the head ignored.

As for the other browsers, the window.onload in the body will replace the one in the body tag.

One needs to pay special attention to Chrome as it will take all the onload listener in HTML seriously and the programmer needs to make sure the onload script is not running the same script twice or more.

Caveman Blogger

This is a weird case.

function dummy() {
.
.
.
}

setInterval(dummy, 1000); // This will WORK in non-Object-Oriented Function
setInterval(dummy(), 1000); // This will not work as it has too many brackets
setInterval("dummy", 1000); // This will not work
setInterval("dummy()", 1000); // This will work even in a Object Oriented Function

I found when I tried to set an interval loop to a OO (Objected Oriented) Function as follows:

function dummy() {
.
.
.
   this.action1 = function() {

      .
      .
      .
   }
.
.
.
}

setInterval(dummy.action1, 1000); // This will NOT work in Object Oriented Function
setInterval(dummy.action1(), 1000); // This will not work as it has too many brackets
setInterval("dummy.action1", 1000); // This will not work
setInterval("dummy.action1()", 1000); // This will work even in a Object Oriented Function

The function without the quotes and bracket will not work. But it works well in a normal non-OO funtion.
This may be something trivial but it is interesting. I haven't tried anything other than Chrome yet. Maybe other browsers are not giving this problem.

Caveman Blogger

When one uses the transitional DOCTYPE in Chrome/Safari/Firefox, your Javascript assignment of value to marginTop or top will not be successful if you left out the 'px'.

For example, if you want to move a dummy DIV to a height of 100 pixel from the top, you might do this:

document.getElementById('dummy').style.top = 100;

It will work if you are not using the transitional DOCTYPE. If you are using the transitional DOCTYPE, you need to assign it with a 'px' at the end:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> .
.
.
document.getElementById('dummy').style.top = 100 + 'px';

in order to make it work for Chrome/Safari/Firefox.

As for IE, it will work whether it is in transitional (quirks) mode or not.

Caveman Blogger

I encounter this today that the Javascript var top cannot be used in Chrome. Weird. It works well in Safari and IE. In Chrome, the variable name is stored as [Object Window]. Solution: Just rename top variable to something else.

Caveman Blogger

This is something a web programmer needs to take note as this could lengthen your coding time if this is not taken into account.

Chrome/Firefox/Safari is not able to read external Javascript/CSS with commands such as:

<link rel="stylesheet" type="text/css" href="testcss.php" />
<script language="JavaScript" src="testjs.php"></script>

if your broswer runs in STANDARD mode (with the declaration of DOCTYPE).

Fix:

1) Include your CSS/JAVASCRIPT in your HTML file that you are running, to prevent referring to an external CSS/JAVASCRIPT

2) Run your browser in QUIRK mode (do not declare any DOCTYPE)

3) Use PHP to spit out DOCTYPE if IE browsers are detected

I would put codes like these before the <HTML> in my whatever.php:

<?php
error_reporting(0); // This is needed if your PHP spits errors/warnings to your browser
if (preg_match('/MSIE/', $_SERVER['HTTP_USER_AGENT'])) {
echo('<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
}
?>

Caveman Blogger

I once made the O capital letter and it won't work in Chrome.

setTimeout() - OK
setTimeOut() - Not working in Chrome

Just a trivial post but it is interesting.

Caveman Blogger

I mentioned how I call a function from iframe. Now I explain how I do the opposite, calling a function in iframe from the parent or main HTML.

After trying a few suggestions found using Google, I find this working for all the browers I use, viz., IE, Firefox, Safari and Chrome:

document.getElementById('framename').contentWindow.functioname(argument);

You can replace your own framename, functionname and argument.

Update: It will not work on Chrome if you are running in local host due to security reason. Upload to a web server and it will work.

My Programming Tricks

Labels

Tuesday, October 28, 2014

onload Priority for Chrome, Safari, Firefox and Internet Explorer

Saturday, March 9, 2013

Weird Javascript setInterval Scenarios in Chrome

Wednesday, February 27, 2013

The Curious Case of Missing 'px' in Javascript for Chrome/Safari/Firefox

Monday, August 20, 2012

Weird Chrome Javascript Problem

Tuesday, January 3, 2012

Chrome/Firefox/Safari Not Able to Read External Javascript/CSS

Monday, January 2, 2012

Chrome and setTimeout() Javascript Function

Saturday, March 6, 2010

Calling a Function in iframe