Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

onLoad vs. browser type

Posted on 2010-01-01
14
Medium Priority
?
542 Views
Last Modified: 2012-05-08
Hi experts,

I need to onload different data based on different browsers. Here is an example.

if browser_type() == "Firefox"
<body onload="func_1(...)">
else if browser_type() == "MSIE"
<body onload="func_2(...)">


Can anybody tell me how to implement this? browser_type(), func_1(...) and func_2(...) are all javaScript
functions.

Thanks so much.
0
Comment
Question by:davidw88
  • 5
  • 4
  • 2
  • +2
14 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 320 total points
ID: 26158738
test for "features" supported in IE that are not supported in other browsers. And don't use
<body onload="...">

use an onload function within a script tag. That way you can put all the js code in a separate js file when you are ready to deploy your project:

<html>
<head>
 <script>
window.onload=function()
{
  if("undefined"!=typeof(ActiveXObject) )
  {
   func_1();
  }
 else
 {
   //non-IE
  func_2();
 }

};
 </script>
</head>
<body>
</body>
</html>
0
 

Author Comment

by:davidw88
ID: 26159576
Thanks hielo for your reply. Let me test it and get back to you later.
0
 
LVL 15

Assisted Solution

by:fsze88
fsze88 earned 160 total points
ID: 26160538
if (navigator.userAgent.toUpperCase().indexOf('MSIE')>=0){
  browserType = "MSIE";
  ie = true;   nn6 = false;
} else if (navigator.userAgent.toUpperCase().indexOf('SAFARI')>=0){
  browserType = "SAFARI";
  ie = false;   nn6 = true;
}else if (navigator.userAgent.toUpperCase().indexOf('OPERA')>=0){
  browserType = "OPERA";
  ie = false;   nn6 = true;
}else if (navigator.userAgent.toUpperCase().indexOf('FIREFOX')>=0){
  browserType = "FIREFOX";
  ie = false;   nn6 = true;
}else{
  browserType = "";
}
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 6

Assisted Solution

by:Ravi Kalla
Ravi Kalla earned 320 total points
ID: 26161077
below is the code the suits your requirement exactly
<script>
  function oneStop()
  {
    /* Logic for finding the browser type */
    if (navigator.userAgent.toUpperCase().indexOf('MSIE')>=0){
      browserType = "MSIE";
      ie = true;   nn6 = false;
    } else if (navigator.userAgent.toUpperCase().indexOf('SAFARI')>=0){
      browserType = "SAFARI";
      ie = false;   nn6 = true;
    }else if (navigator.userAgent.toUpperCase().indexOf('OPERA')>=0){
      browserType = "OPERA";
      ie = false;   nn6 = true;
    }else if (navigator.userAgent.toUpperCase().indexOf('FIREFOX')>=0){
      browserType = "FIREFOX";
      ie = false;   nn6 = true;
    }else{
      browserType = "";
    }
    alert(browserType);

    //Logic for calling methods according to the browser type
    /*
    if browserType == "Firefox"
	  func_1(...);
	else if browserType == "MSIE"
      func_2(...);
    */
  }
</script>
<body onload = "oneStop()">
  blah blah blah...
</body>

Open in new window

0
 
LVL 5

Assisted Solution

by:siddagrl
siddagrl earned 480 total points
ID: 26161335
there is one more browser in the market :-)
==> Chrome

Also you will need to carefully order your if..else..conditions because userAgent of Chrome contains 'SAFARI' keyword!
see attached image...
ChromeUserAgent.JPG
0
 

Author Comment

by:davidw88
ID: 26163800
Thanks experts for your replies! I followed Ravi_kalla's idea to move forward. Now IE and Firefox work, however Chrome and Safari seem not work with <body onLoad=...>.

I have to use <body onLoad=...> as I need to pass arguments to javaScript functions.

Any more ideas?
0
 
LVL 5

Assisted Solution

by:siddagrl
siddagrl earned 480 total points
ID: 26164468
see the attached code...
<html>
<head><title>Onload</title></head>
<body onLoad="callMe('this is my message')">

<script type="text/javascript">
function callMe(msg)
{
    alert(msg);
}
</script>

</body></html>

Open in new window

0
 
LVL 5

Expert Comment

by:siddagrl
ID: 26164473
or this could be done using variables...
<html>
<head><title>Onload</title></head>
<body onLoad="callMe()">

<script type="text/javascript">
var m = 'this is my message';

//window.onload = callMe;

function callMe()
{
    alert(m);
}
</script>

</body></html>

Open in new window

0
 

Author Comment

by:davidw88
ID: 26164493
Thanks siddagrl. However, your reply does not answer my question.  What bothers me is that Chrome and Safari do not work with onLoad.  I know how to pass arguments to a javaScript function.

Specifically, Chrome and Safari do not work with
<body onLoad=...>


So, my question is: how to make Chrome and Safari work with onLoad?

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 320 total points
ID: 26164551
>>I have to use <body onLoad=...> as I need to pass arguments to javaScript functions.
you are very confused. Using
window.onload=function(){ ... }

does NOT prevent you from calling functions that need parameters. Specifically instead of the "..." you need to determine which function(s) to call for which browser and pass the arguments as needed.

>>So, my question is: how to make Chrome and Safari work with onLoad?
try using onload (all lower case)
0
 
LVL 5

Assisted Solution

by:siddagrl
siddagrl earned 480 total points
ID: 26165687
hi davidw88,

the code which i have posted works fine in Chrome 4.0.249.43 irrespective of case (onload or onLoad)
0
 
LVL 6

Assisted Solution

by:Ravi Kalla
Ravi Kalla earned 320 total points
ID: 26165946
this is not a big issue to identify the Chrome browser. Check for the string "Chrome" even before checking for another browsers. This resolves the issue. Below code works perfect.
<script>
  function oneStop()
  {
    /* Logic for finding the browser type */
    if (navigator.userAgent.toUpperCase().indexOf('CHROME')>=0){
      browserType = "CHROME";
      ie = false;   nn6 = true;
    }else if (navigator.userAgent.toUpperCase().indexOf('MSIE')>=0){
      browserType = "MSIE";
      ie = true;   nn6 = false;
    } else if (navigator.userAgent.toUpperCase().indexOf('SAFARI')>=0){
      browserType = "SAFARI";
      ie = false;   nn6 = true;
    }else if (navigator.userAgent.toUpperCase().indexOf('OPERA')>=0){
      browserType = "OPERA";
      ie = false;   nn6 = true;
    }else if (navigator.userAgent.toUpperCase().indexOf('FIREFOX')>=0){
      browserType = "FIREFOX";
      ie = false;   nn6 = true;
    }else{
      browserType = "";
    }
    alert(browserType);

    //Logic for calling methods according to the browser type
    /*
    if browserType == "Firefox"
          func_1(...);
        else if browserType == "MSIE"
      func_2(...);
    */
  }
</script>
<body onload = "oneStop()">
  blah blah blah...
</body>

Open in new window

0
 

Author Comment

by:davidw88
ID: 26166245
Thanks experts for all of your replies! Let me follow your ideas and test again.
0
 

Author Comment

by:davidw88
ID: 26176434
Hi experts,

I finally found the reason that "onLoad" did not work. There was "document.createElement(...)" in my script that Chrome and Safari seemed not be able to process. Chrome and Safari seem to handle "onLoad" in a different order from Firefox and IE.

All your replies are correct.  I give each reply 40 points.

Again, thanks experts for your help!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question