Adding Script Element to the DOM

Adding Script Element to the DOM

Post by Joseph Sco » Sat, 19 Nov 2005 09:10:54


Currently I am trying to use JavaScript within greasemonkey to dynamically
put a menu at the top of each page. I am running in to trouble when I try
to append a node representing a script tag to the header section. It ends
up not adding anything to the document. I am currently getting no errors
from the javascript panel in firefox. Here is the code I am using:

HeadTag = document.getElementsByTagName("head");

var scriptElement = document.createElement('script');
if (scriptElement) {
scriptElement.type = 'text/javascript';
scriptElement.id = 'addedscript';
HeadTag[0].appendChild(scriptElement);

}

Please let me know if I am doing something wrong or if i need to add more to
this code. Also, how do I then add the javascript code to the newly created
node? Thanks for the help.

Joseph Scoccimaro
XXXX@XXXXX.COM
 
 
 

Adding Script Element to the DOM

Post by yb » Sat, 19 Nov 2005 09:53:26

what does the script itself do? maybe try manually adding the script
first to see its effect?

or, instead have some container element in the body of the document
where the menu can be added?

 
 
 

Adding Script Element to the DOM

Post by Joseph Sco » Sat, 19 Nov 2005 10:04:39

The script would just add this menu bar to the top of every page:
http://www.yqcomputer.com/
a project that will use the DOM to perform different types of analysis on a
page. I just wanted this menu to be above every page so that the user can
select a type of analysis to perform.

What do you mean have a container element?


Joseph Scoccimaro
 
 
 

Adding Script Element to the DOM

Post by RobG » Sat, 19 Nov 2005 10:56:36


How are you determining that? Your code works for me in Firefox, I can
see the added script element in the DOM inspector.



There are tips on writing scripts here, I'll just comment on what you
posted:

<URL: http://www.yqcomputer.com/ ;



Better feature detection is:

if (! document.createElement ||
!document.getElementsByTagName) return;
...

Since you are running this from Greasemonkey and that also means the
Firefox browser, it might be reasonable to expect a certain level of
support for JavaScript and DOM and not bother.



As far as I can tell, Greasemonkey inserts the code for you, you just
need to write the functions.

Below is a function that will add a script element in a generic fashion
where the code is in a separate file 'scripts/aScript.js':


function addScript()
{
if (! document.createElement ||
!document.getElementsByTagName) return;

var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.id = 'addedscript';
oScript.src = 'scripts/aScript.js';
document.getElementsByTagName('head')[0].appendChild(oScript);
}


To conform to the suggested syntax for Greasemonkey and add it to the
global object as an anonymous function, wrap it thusly:

(
function addScript()
{
...
}
)();

Why not post a very simple example of your menu (say one item) along
with how you are attaching it?



--
Rob
 
 
 

Adding Script Element to the DOM

Post by RobG » Sat, 19 Nov 2005 16:04:49


[...]

Downloaded and installed Greasemonkey, the following works:

(
function addScript()
{
var theHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'file://C:/fullPathToFile/blah.js';
theHead.appendChild(oScript);
}
)();



[...]

--
Rob
 
 
 

Adding Script Element to the DOM

Post by Randy Web » Sat, 19 Nov 2005 20:49:31

RobG said the following on 11/18/2005 2:04 AM:



function addScript(scriptSource){
.....
oScript.src = scriptSource;
}

Allows it to be a general function to add a script file on the fly.
Which way one does it depends on the needs/desires at the time.

--
Randy
comp.lang.javascript FAQ - http://www.yqcomputer.com/
Javascript Best Practices - http://www.yqcomputer.com/
 
 
 

Adding Script Element to the DOM

Post by Joseph Sco » Sat, 19 Nov 2005 21:01:18

Thanks a lot for the help.


Joseph Scoccimaro
 
 
 

Adding Script Element to the DOM

Post by RobG » Sun, 20 Nov 2005 00:57:52


[...]

Probably getting OT, but I could not get access to functions in the
script that is loaded from the function that loaded it, e.g.:

(
function (){
var addScript = function(){
var oS = document.createElement('script');
oS.type = 'text/javascript';
oS.src = 'file://fullPathToFile/xx.js';

var theHead = document.getElementsByTagName('head')[0];
theHead.appendChild(oScript);
}

var someFn = function(){
// try to use some function in xx.js
}

addScript();
someFn();

}
)();


If xx.js is:

alert('Hi from xx.js');


the alert 'Hi ...' appears. But wrap it in a function and try to call
it and the console reports that the function is not defined. Use
setTimeout() to call the function (even with a lag of 0ms) and we're
back in business:

setTimeout("someFn()", 0);


I have noticed similar behaviour at other times too. I'm sure I
stumbled across a Firefox bug report about it but can't find it again.



--
Rob