Adding Script Element to the DOM

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
gte542u@mail.gatech.edu

re: Adding Script Element to the DOM

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?

re: Adding Script Element to the DOM

The script would just add this menu bar to the top of every page:
http://www.brainjar.com/dhtml/menubar/demo3.html. I am currently working on
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

re: Adding Script Element to the DOM

Joseph Scoccimaro wrote:[color=blue]
> 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.[/color]

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

[color=blue]
> I am currently getting no errors
> from the javascript panel in firefox. Here is the code I am using:[/color]

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

<URL:http://greasemonkey.mozdev.org/authoring.html>

[color=blue]
>
> HeadTag = document.getElementsByTagName("head");
>
> var scriptElement = document.createElement('script');
> if (scriptElement) {[/color]

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.

[color=blue]
> 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.[/color]

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

re: Adding Script Element to the DOM

RobG wrote:[color=blue]
> Joseph Scoccimaro wrote:[/color]
[...][color=blue]
>[color=green]
>> I am currently getting no errors from the javascript panel in
>> firefox. Here is the code I am using:[/color]
>
>
> There are tips on writing scripts here, I'll just comment on what you
> posted:
>
> <URL:http://greasemonkey.mozdev.org/authoring.html>
>[/color]

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

re: Adding Script Element to the DOM

RobG said the following on 11/18/2005 2:04 AM:[color=blue]
> RobG wrote:
>[color=green]
>> Joseph Scoccimaro wrote:[/color]
>
> [...]
>[color=green]
>>[color=darkred]
>>> I am currently getting no errors from the javascript panel in
>>> firefox. Here is the code I am using:[/color]
>>
>>
>>
>> There are tips on writing scripts here, I'll just comment on what you
>> posted:
>>
>> <URL:http://greasemonkey.mozdev.org/authoring.html>
>>[/color]
>
> 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);
> }
> )();[/color]

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://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

re: Adding Script Element to the DOM

Thanks a lot for the help.


Joseph Scoccimaro

re: Adding Script Element to the DOM

Randy Webb wrote:[color=blue]
> RobG said the following on 11/18/2005 2:04 AM:
>[/color]
[...][color=blue][color=green]
>> (
>> 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);
>> }
>> )();[/color]
>
>
> 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.
>[/color]

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