P
petermichaux
Hi,
I'm hoping for a reason I'm wrong or an alternate solution...
I'd like to be able to dynamically include some javascript files. This
is like scriptaculous.js library but their solution is broken in
Firefox 1.5.0.1 on OS X. What happens with the Scriptaculous library is
this
In the html document the author only has to include one line
<script type="text/javascript"
src="/javascripts/scriptaculous.js"></script>
but scriptaculous.js determines where scriptaculous.js was from and
then add other lines to the html doc to src other JavaScript files. By
the end of scriptaculous.js the html doc has something like
<script type="text/javascript"
src="/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
<script type="text/javascript" src="/javascripts/dragdrop.js"></script>
(All the scripts are in the same server directory.)
This is a good idea in scriptaculous because it insures that the
JavaScript files are src'ed in the correct order. Also, if the
implementation of scriptaculous library changes then the html docs that
use it are not broken. This may lead to too much javascript being
src'ed by the html doc but I'm not worried about that right now.
The problem with the method of determining from what domain and which
directory scriptaculous.js came from in the first place cannot be used
twice in Firefox (ie for two separate libraries). I tried to play the
same trick but document.getElementsByTagName('script') will not let me
do it. I have tried to trim down the following example to show what I
want to do. It works in Safari. The divs backgrounds are green and red.
In Firefox only one has a background color. No errors or exceptions.
Firefox can never find the <script src="grof.js"> tag.
If you want to see the problem I found with Firefox more isolated
please see bugzilla
(https://bugzilla.mozilla.org/show_bug.cgi?id=331174). What I found was
the problem is that in firefox you cannot ask for the length of the
scriptTags variable below twice (grof.js, burp.js). Changing the
variable name (scriptTags) in only grof.js did not make a difference.
So what is another way to determine the location (url) of grof.js (and
burp.js) in the following example (or scriptaculous.js in that library)
so that I can dynamically src the other js files in the libraries
(grof2.js)? I don't want to hardcode any locations.
Thanks for reading this far and I hope someone has a suggestion.
Peter
------------------- test.html -------------------
<html>
<head>
<script type="text/javascript" src="grof.js"></script>
<script type="text/javascript" src="burp.js"></script>
</head>
<body>
<div id="grof">Grof</div>
<div id="burp">Burp</div>
</body>
</html>
------------------- grof.js -------------------
var scriptTags = document.getElementsByTagName("script");
for(var i=0;i<scriptTags.length;i++) {
if(scriptTags.src && scriptTags.src.match(/grof\.js(\?.*)?$/))
{
var path = scriptTags.src.replace(/grof\.js(\?.*)?$/,'');
document.write('<script type="text/javascript"
src="'+path+'grof2.js"></script>');
}
}
------------------- grof2.js -------------------
function g(){
var burp = document.getElementById("grof");
burp.style.background="green";
}
window.addEventListener("load", g, false);
------------------- burp.js -------------------
var scriptTags = document.getElementsByTagName("script");
for(var i=0;i<scriptTags.length;i++) {
if(scriptTags.src && scriptTags.src.match(/burp\.js(\?.*)?$/))
{
// Firefox will never get in here because the if condition will
never be true.
var path = scriptTags.src.replace(/burp\.js(\?.*)?$/,'');
document.write('<script type="text/javascript"
src="'+path+'burp2.js"></script>');
}
}
------------------- burp2.js -------------------
function b(){
var burp = document.getElementById("burp");
burp.style.background="red";
}
window.addEventListener("load", b, false);
I'm hoping for a reason I'm wrong or an alternate solution...
I'd like to be able to dynamically include some javascript files. This
is like scriptaculous.js library but their solution is broken in
Firefox 1.5.0.1 on OS X. What happens with the Scriptaculous library is
this
In the html document the author only has to include one line
<script type="text/javascript"
src="/javascripts/scriptaculous.js"></script>
but scriptaculous.js determines where scriptaculous.js was from and
then add other lines to the html doc to src other JavaScript files. By
the end of scriptaculous.js the html doc has something like
<script type="text/javascript"
src="/javascripts/scriptaculous.js"></script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
<script type="text/javascript" src="/javascripts/dragdrop.js"></script>
(All the scripts are in the same server directory.)
This is a good idea in scriptaculous because it insures that the
JavaScript files are src'ed in the correct order. Also, if the
implementation of scriptaculous library changes then the html docs that
use it are not broken. This may lead to too much javascript being
src'ed by the html doc but I'm not worried about that right now.
The problem with the method of determining from what domain and which
directory scriptaculous.js came from in the first place cannot be used
twice in Firefox (ie for two separate libraries). I tried to play the
same trick but document.getElementsByTagName('script') will not let me
do it. I have tried to trim down the following example to show what I
want to do. It works in Safari. The divs backgrounds are green and red.
In Firefox only one has a background color. No errors or exceptions.
Firefox can never find the <script src="grof.js"> tag.
If you want to see the problem I found with Firefox more isolated
please see bugzilla
(https://bugzilla.mozilla.org/show_bug.cgi?id=331174). What I found was
the problem is that in firefox you cannot ask for the length of the
scriptTags variable below twice (grof.js, burp.js). Changing the
variable name (scriptTags) in only grof.js did not make a difference.
So what is another way to determine the location (url) of grof.js (and
burp.js) in the following example (or scriptaculous.js in that library)
so that I can dynamically src the other js files in the libraries
(grof2.js)? I don't want to hardcode any locations.
Thanks for reading this far and I hope someone has a suggestion.
Peter
------------------- test.html -------------------
<html>
<head>
<script type="text/javascript" src="grof.js"></script>
<script type="text/javascript" src="burp.js"></script>
</head>
<body>
<div id="grof">Grof</div>
<div id="burp">Burp</div>
</body>
</html>
------------------- grof.js -------------------
var scriptTags = document.getElementsByTagName("script");
for(var i=0;i<scriptTags.length;i++) {
if(scriptTags.src && scriptTags.src.match(/grof\.js(\?.*)?$/))
{
var path = scriptTags.src.replace(/grof\.js(\?.*)?$/,'');
document.write('<script type="text/javascript"
src="'+path+'grof2.js"></script>');
}
}
------------------- grof2.js -------------------
function g(){
var burp = document.getElementById("grof");
burp.style.background="green";
}
window.addEventListener("load", g, false);
------------------- burp.js -------------------
var scriptTags = document.getElementsByTagName("script");
for(var i=0;i<scriptTags.length;i++) {
if(scriptTags.src && scriptTags.src.match(/burp\.js(\?.*)?$/))
{
// Firefox will never get in here because the if condition will
never be true.
var path = scriptTags.src.replace(/burp\.js(\?.*)?$/,'');
document.write('<script type="text/javascript"
src="'+path+'burp2.js"></script>');
}
}
------------------- burp2.js -------------------
function b(){
var burp = document.getElementById("burp");
burp.style.background="red";
}
window.addEventListener("load", b, false);