473,405 Members | 2,272 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

Cross-browser programming

In some pages of my website I use a code like the following:
for (var n = 0; n < getTagsArray("SPAN").length; n++){

//SPAN is just an example. I also use other tags
tag = getTagsArray("SPAN")[n];

//make something with tag...
}
function getTagsArray(Tag){

if(document.all){ //Internet Explorer
return document.all.tags(Tag);
}
else if (document.layers){ //Netscape
eval("return document.tags." + Tag);
}

}

I want to put all browser-specific code inside the getTagsArray
function. So far, I've programmed only for Internet Explorer (my
browser), but now I want to make my website visible to all browsers.
I'm not sure about the getTagsArray function. Is it right or is there
a better way to do the same thing? And how can I extend that function
to make it work in other browsers?

Finally, where can I find some information about cross-browser
programming? I have the javascript reference for Internet Explorer and
Netscape, but I know nothing about other browsers.

Thanks for your help,

Simba
Jul 20 '05 #1
4 5436
Simba wrote:
In some pages of my website I use a code like the following:
for (var n = 0; n < getTagsArray("SPAN").length; n++){

//SPAN is just an example. I also use other tags
tag = getTagsArray("SPAN")[n];

//make something with tag...
}
function getTagsArray(Tag){

if(document.all){ //Internet Explorer
return document.all.tags(Tag);
}
else if (document.layers){ //Netscape
eval("return document.tags." + Tag);
}
The modern way to do this is:
document.getElementsByTagName(Tag)

So you may want:
if (document.getElementsByTagName)
return document.getElementsByTagName(Tag);
else if (document.all) ...

}

I want to put all browser-specific code inside the getTagsArray
function. So far, I've programmed only for Internet Explorer (my
browser), but now I want to make my website visible to all browsers.
I'm not sure about the getTagsArray function. Is it right or is there
a better way to do the same thing? And how can I extend that function
to make it work in other browsers?

Finally, where can I find some information about cross-browser
programming? I have the javascript reference for Internet Explorer and
Netscape, but I know nothing about other browsers.


All modern sciptable browsers should implement the W3C DOM
<http://www.w3.org/DOM>, level 1 at least.

As long as you stick to DOM 1 objects, methods and properties, you
should be fine. Also, accessing the style property of elements is
fairly global. The single biggest cross-browser trap nowadays is events
(MS refuses to support DOM events).

Search Google for "DOM Compatibility" for more specific info.
Jul 20 '05 #2
Keith Bowes <do****@spam.me> writes:
Simba wrote:
function getTagsArray(Tag){
if(document.all){ //Internet Explorer
return document.all.tags(Tag);
}
else if (document.layers){ //Netscape
eval("return document.tags." + Tag);
}

So you may want:
if (document.getElementsByTagName)
return document.getElementsByTagName(Tag);
else if (document.all) ...


I second that. You will also find that the newer versions
of IE understands getElementsByTagName too.

My reason to butt in: You don't need the eval for Netscape 4. Just
write:
return document.tags[Tag]

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #3
"Simba" <ba****@interfree.it> wrote in message
news:42**************************@posting.google.c om...
In some pages of my website I use a code like the following:

for (var n = 0; n < getTagsArray("SPAN").length; n++){

//SPAN is just an example. I also use other tags
tag = getTagsArray("SPAN")[n];

//make something with tag...
}
This is very inefficient coding. The process of acquiring a collection
or nodeList of all of the tags of a particular type is quite intensive
so repeating that process for each evaluation of the length of the
collection and again to acquire each reference to an element is very
wasteful and relatively slow.

Also, as it is the getTagsArray function is not guaranteed to return an
object at all. The following might be better:-

var tagsCollection = getTagsArray("SPAN")
if(tagsCollection){
for (var n = 0; n < tagsCollection.length; n++){
tag = tagsCollection[n];
//make something with tag...
}
}
function getTagsArray(Tag){

if(document.all){ //Internet Explorer
return document.all.tags(Tag);
}
else if (document.layers){ //Netscape
eval("return document.tags." + Tag);
That particular incantation is misguided in several ways. First, it uses
eval to resolve a constructed dot notation property accessor. This is
not necessary and relatively inefficient when compared with the
alternatives:-

URL: http://www.litotes.demon.co.uk/js_info/sq_brackets.html >

However, the document.tags collection on Netscape 4 is not a collection
of references to HTML elements. Netscape 4 does not make the majority of
HTML elements accessible to JavaScript and the document.tags collection
is entirely related to Netscape 4's JavaScript Style Sheets (JSS)
implementation of CSS.
}

}

I want to put all browser-specific code inside the getTagsArray
function. So far, I've programmed only for Internet Explorer
(my browser), but now I want to make my website visible to all
browsers. I'm not sure about the getTagsArray function. Is it
right or is there a better way to do the same thing? And how
can I extend that function to make it work in other browsers?
Browsers that implement the W3C DOM level 1 standard (Opera 5+, IE 5.0+,
Netscape 6+, Konqueror 3+, ICEBrowser, and many others) have a
document.getelementsByTagName function that will do the required task.

For Netscape 4 the process is considerably more complex as you would
have to provide code to search the various collections. Elements with
CSS position properties of 'relative' or 'absolute' will be in the
document.layers collection. INPUT, SELECT and TEXTAREA elements could be
recovered by searching the elements collection of each form on the page
(plus the forms on any documents within layers), and OPTION tags from
the options collections of SELECT elements. FORM elements from the forms
collections, IMG from the images collection and A elements from a
combination of document.anchors and document.links. That is 120 odd
lines of code to provide a very limited emulation of
getElementsByTagName on a browser that is little used and will probably
not let you do whatever you were planning on doing with the elements
anyway.
Finally, where can I find some information about cross-browser
programming? I have the javascript reference for Internet
Explorer and Netscape, but I know nothing about other browsers.


Locate the comp.lang.javascript newsgroup archive on groups.google.com
and read as much of it as you have time to.

Richard.

--

Example JavaScript DOM listings for: Opera 7.11,
Mozilla 1.2 and ICEbrowser 5.4
<URL: http://www.litotes.demon.co.uk/dom_root.html >
Jul 20 '05 #4
"Richard Cornford" <Ri*****@litotes.demon.co.uk> wrote in message
news:bd*******************@news.demon.co.uk...
<snip>
... That is 120 odd lines of code to provide a very limited
emulation of getElementsByTagName on a browser that is
little used and will probably not let you do whatever you were
planning on doing with the elements anyway.


You might still be interested in what that 120 odd lines of code might
look like. This is an example, its strategy is to normalise
document.getElementsByTagName on browser that do not support it. This
version does not attempt to handle the problem of extracting CSS
positioned elements on Netscape 4.

if(!document.getElementsByTagName){
if(document.all){
document.getElementsByTagName = function(nem){
return document.all.tags(nem.toUpperCase());
}
}else{
document.getElementsByTagName = function(){
var selTypes = ['select-one','select-multiple','select'];
var inpTypes = ['radio','text','reset','submit','image',
'password','hidden','checkbox','button','file'];
var txATypes = ['textarea'];
function handleName(name, ob, ar){
if((ar[name])&&(ar[name] != ob)){
if((typeof ar[name].length == 'number')&&
(!ar[name].options)){ //is an array (not a select)
var add = true;
for(var c = ar[name].length;c--;){
if(ar[name][c] == ob){
add = false;
break;
}
}
if(add)ar[name][ar[name].length] = ob;
}else{ //is an element
ar[name] = [ar[name], ob];
}
}else{
ar[name] = ob;
}
}
function addCollection(col, ar){
if(col){
for(var ob,c = col.length;c--;){
ob = col[c];
if(ob.name)handleName(ob.name, ob, ar);
if(ob.id)handleName(ob.id, ob, ar);
ar[ar.length] = ob;
}
}
};
function addOptionsEls(frms, ar){
var ob,sels = [];
addFormEls(frms, 'select', sels);
for(var c = sels.length;c--;){
if(sels[c].options){
for(var d = sels[c].options.length;d--;){
ob = sels[c].options[d];
if(ob.name)handleName(ob.name, ob, ar);
if(ob.id)handleName(ob.id, ob, ar);
ar[ar.length] = ob;
}
}
}
}
function addFormEls(frm, nem, ar){
if(frm){
var types;
switch(nem){
case 'input':
types = inpTypes;
break;
case 'select':
types = selTypes;
break;
case 'textarea':
types = txATypes;
break;
default:
break;
}
if(types){
for(var e = frm.length;e--;){
var fr = frm[e].elements||frm[e];
var ob,ty,el;
for(var c = fr.length;c--;){
el = fr[c];
if((typeof el.length == 'undefined')||(el.options)){
el = [el];
}
for(var f = el.length;f--;){
if(ty = el[f].type){
for(var d = types.length;d--;){
if(ty == types[d]){
ob = el[f];
if(ob.name)handleName(ob.name, ob, ar);
if(ob.id)handleName(ob.id, ob, ar);
ar[ar.length] = ob;
break;
}
}
}
}
}
}
}
}
};
function searchDoc(doc, nem, ar){
if(doc){
switch(nem){
case 'a':
addCollection(doc.links, ar);
addCollection(doc.anchors, ar);
break;
case 'img':
addCollection(doc.images, ar);
break;
case 'input':
case 'select':
case 'textarea':
addFormEls(doc.forms, nem, ar);
break;
case 'option':
addOptionsEls(doc.forms, ar);
break;
case 'form':
addCollection(doc.forms, ar);
break;
default:
break;
}
if(doc.layers){
for(var c = doc.layers.length;c--;){
searchDoc(doc.layers[c].document, nem, ar);
}
}
}
};
return function(nem){
var ar = [];
searchDoc(document, nem.toLowerCase(), ar)
return ar;
};
}();
}
}

Richard.

--

Example JavaScript DOM listings for: Opera 7.11,
Mozilla 1.2 and ICEbrowser 5.4
<URL: http://www.litotes.demon.co.uk/dom_root.html >
Jul 20 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Web Science | last post by:
Site and Features: http://www.eigensearch.com Search engine, eigenMethod, eigenvector, mathematical, manifolds, science, technical, search tools, eigenmath, Jacobian, quantum, mechanics,...
12
by: * ProteanThread * | last post by:
but depends upon the clique: ...
3
by: rollasoc | last post by:
Hi, Doing a bit of system testing on a Windows 98 laptop. (.Net 1.1 app). Did a bit of testing. Loaded a previously saved file. A gray box appeared with the text and buttons all white...
0
by: Web Science | last post by:
Site and Features: http://www.eigensearch.com Search engine, eigenMethod, eigenvector, mathematical, manifolds, science, technical, search tools, eigenmath, Jacobian, quantum, mechanics,...
4
by: David Peach | last post by:
Hello, hope somebody here can help me... I have a query that lists defects recorded in a user defined date range. That query is then used as the source for a Cross Tab query that cross-tabs count...
23
by: Jeff Rodriguez | last post by:
Here's what I want do: Have a main daemon which starts up several threads in a Boss-Queue structure. From those threads, I want them all to sit and watch a queue. Once an entry goes into the...
0
by: Web Science | last post by:
Site and Features: http://www.eigensearch.com Search engine, eigenMethod, eigenvector, mathematical, manifolds, science, technical, search tools, eigenmath, Jacobian, quantum, mechanics,...
7
by: Scott M. | last post by:
How can I disable the cross-site scripting check for one particular page of a site?
1
by: Rob Woodworth | last post by:
Hi, I'm having serious problems getting my report to work. I need to generate a timesheet report which will contain info for one employee between certain dates (one week's worth of dates). I...
6
by: ampo | last post by:
Hello. Can anyone help with cross-domain problem? I have HTML page from server1 that send xmlHTTPRequest to server2. How can I do it? Thanks.
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.