Conditional JS coding

@JMRKERNov 03.2007

I want to call a common JS script file from the HTML code, like:
<script type=”text/javascript” src=”Common.js”></script>

In the JS script I can set a constant or variable for one condition.
Not a problem.
I can also create a variation of the Common.js file (like ‘CommonMod.js’) with the second condition.
Not a problem.

What I would like to do is have the script logic so that I could call the same Common.js script
from 2 different HTML files for one condition or the other.

Sort of like a ‘conditional pseudo-compiler’ that would use the condition selected in the HTML file
without reverting to 2 separate JS files with the condition initialize differently in each JS script file.

Question: Is there some sort of code/script I can use to do this? ?

to post a comment

JavaScript

5 Comments(s) _↴

@mrhooNov 03.2007 — #Occasionally I have an IE version of a script.

For example, events.js and events_ie.js

I pass any conditional urls with a trailing underscore to a createElement('script') or an xmlHTTPRequest GET method, like this:

[B]addScript('events_.js');[/B]

and I resolve the url in the script handling method -

var rep=(document.addEventListener)? '.js': '_ie.js';

url=url.replace(/_.js$/,rep);

@JMRKERauthorNov 04.2007 — #Thanks 'mrhoo'.

While it's not exactly what I was originally thinking,

I believe I can use it. I may need the extra hour we spring forward tonight,

but I'll get back with a more concrete example if I can make it work.

Instead of two different JS files (like you have with 'events.js' and 'events_ie.js')

I was thinking only one file to modify,

but using the flag passed to determine what part of the script to use.

I think I can use your 'replace'ment function to set the flag to my needs.

Thanks for the ideas. I think I can make it work my specific needs. ?

@nitro2k01Nov 04.2007 — #This is more or less what mrhoo said, but written in code.

<i>
 </i>&lt;script type="text/javascript"&gt;
 var filename;
 
 if (condition)
 filename = "iftrue.js";
 else
 filename = "justincaseitisfalse.js";
 
 var elm = document.createElement("SCRIPT");
 
 with(elm){
 type = "text/javascript";
 src = filename;
 }
 
 document.getElementByTagName("HEAD")[0].appendChild(elm);
 &lt;/script&gt;

If you really really want to have everything in the same file, you could do it like this:

if(condition){
 window.myfunc = function(){
 alert("myfunc created with condition == true!");
 }
 window.myfunc2 = function(){
 alert("myfunc2 created with condition == true!");
 }
 }else{
 window.myfunc = function(){
 alert("myfunc created with condition == false");
 }
 window.myfunc2 = function(){
 alert("myfunc2 created with condition == false");
 }
 }

Don't use var inside the if block if you want things to be globally accessible!

@JMRKERauthorNov 04.2007 — #Here's what I done. It doesn't give any errors, but it also doesn't work!

Note: just saw last post by 'nitro2k01' because I was working on this Example idea below.

I will need some extra time to digest this new information. I'm not sure what I'm trying to ask is as complicated as the answer given, but I'll look!
[/QUOTE]
This is just a silly example to test the actions of what I'm trying to do, but

I don't think I'm using the 'addEventListener' function correctly or in the correct place.

Contents of 'Example.js'

[code=php]
 // Example.js
 // from an idea at:	http://www.webdeveloper.com/forum/showthread.php?t=165046
 
 var rep=(document.addEventListener)? 'plus.gif': 'minus.gif';
 var img  = '_';
 img = img.replace(/_/,rep);
 
 document.getElementById('GIFimage').src = img;
 [/code]

Contents of 'Example.html'

[code=php]
 <html>
 <head>
 <title>Example</title>
 <script type="text/javascript" src='Example.js'></script>
 </head>
 <body>
 <!--
 I thought I should do this in the body tag
 <body onLoad="addEventListener('plus.gif')">
 but I haven't tried yet.
 -->
 Image showed should be either <br />
 plus.gif or minus.gif <br />
 <img id='GIFimage' src='' alt="Image">
 
 </body>
 </html>
 [/code]

The images are just standard + and - gif images so you can replace with your own choice.

All I'm trying to do is control what happens in the JS script with a parameter passed by the HTML code.

Comments on my idea? Any help to clarify my ignorance is appreciated.

@mrhooNov 04.2007 — #Maybe this is closer.

This little 'loadwhat' script tests the implementation before loading the much larger 'script.js' file.

Depending on the presence of a meta element in the html, the larger script is added after the document loads, with a createElement call, else document.write inserts it into the document while it is loading.

in the html head element:

[B]<meta name= "load-late" content="script.js"> [/B](present to trigger condition)

[B]<script type= "text/javascript" src="loadwhat.js"></script>[/B]

// the loadwhat.js file:

[CODE]if(document.implementation && typeof Run== 'undefined'){
 document.getFirstNamed= function(str){
 var el= document.getElementsByName(str);
 if(el.length && el[0].content)return el[0];
 return false;
 }
 Run= {
 addEvent: function(who,wot,fun){
 return who.addEventListener(wot,fun,false);
 },
 imp: function(wot,wch){
 var di= document.implementation;
 if(!di.hasFeature) return false;
 wch= wch || '';
 return di.hasFeature(wot,wch);
 },
 time:function(){
 return new Date().getTime()
 }
 }
 if(Run.imp('HTML')){
 Run.loadlate= document.getFirstNamed('load-late');
 if(!document.addEventListener && document.attachEvent){
 Run.asIE= true;
 Run.addEve= function(who,wot,fun){
 return who.attachEvent('on'+ wot,fun);
 }
 }
 Run.addEve(window,'load',function(){
 document.close();
 Run.loadtime= Run.time();
 if(Run.loadlate){
 var who= Run.loadlate;
 var url= decodeURIComponent(who.content);
 var el= document.createElement('script');
 el.type= "text/javascript";
 el.src= url;
 who.parentNode.appendChild(el);
 }
 })
 if(!Run.loadlate){
 document.write('<script type="text/javascript" src="script.js"></script>');
 }
 }
 }[/CODE]

Also in #JavaScript _↴

How to control print of data 'tagName' is null or not an object Replace a disabled text box with <p>

Success!

Help @JMRKER spread the word by sharing this article on Twitter...

Tweet This

Conditional JS coding

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Conditional JS coding

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴