how to link java script code to a web page such as mail.google.com?

This site is best viewed in a modern browser with JavaScript enabled.

how to link java script code to a web page such as mail.google.com?

ishant7890

I m new to javascript,i want to create an add on for mozilla browser which ll install in firefox n modify the web page on the fly,store the changes for next time visit.Plz Help
Also tell me how to link this code to the browser ?

letmehaveago

Do you mean something like https://addons.mozilla.org/en-US/firefox/addon/748/

For the second question http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

ishant7890

ya something like that,i want to run my application on mail client.How to do?
How to start the code with.Canyou give me any sample codes?

ishant7890

Mail client i meant whenever gmail is opened from this particular computer using firefox,it shud take care of the modifcation

letmehaveago

Try reading into http://wiki.greasespot.net/FAQ/ and http://userscripts.org./ first. Someone else has probably written it already.

ishant7890

First link does not exist and in second link i cudnt find what m lukin 4..

letmehaveago

Sorry, there should be no / for the first link i.e. http://wiki.greasespot.net/FAQ

I think it would be better if you demonstrate what you know about javascript by writing some code.

ishant7890

This is the sample js code i have written
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function change1(text)
{
Ref="0123456789abcdefghijklmnopqrstuvwxyz.-~ABCDEFGHIJKLMNOPQRSTUVWXYZ"
Result=""
for (Count=0; Count<text.length; Count++) {

Char=text.substring (Count, Count+1);
Num=Ref.indexOf (Char);
EncodeChar=Ref.substring(Num+1, Num+2)
Result += EncodeChar

} document.form1.result.value=Result
}

-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">

<table border=0><tr><td>
INPUT YOUR WORD<td><INPUT NAME="input" TYPE=Text><br><td>
<input type=button value="Sendex" onClick="change1(this.form.input.value)"><tr><td>
Result:<td><INPUT NAME="result" TYPE=Text>
</table>
</form>
</BODY>
</HTML>

But the thing is i want this script to execute whenever i use gmail on a browser, choice of browser can be restricted.Thats not the issue
Since i wanted to run the code so i made it as HTML,but in reality i m tryin somethin else
PLZ HELP

letmehaveago

You need to install grease monkey in firefox.

After it is installed click tools/greasemonkey/new user script and enter the following:

// ==UserScript==
// @name           Testing
// @namespace      testing
// @description    Testing
// @include        http://www.google.com.au/
// ==/UserScript==

alert('testing');

So when you visit http://www.google.com.au an alert with 'testing" will popup.

From here it should be evident that you need to replace alert('testing'); with your javascript code and changed to match your requirements.

Your code is for a full html page so you will need to modify it to javascript code only. Specifically http://www.w3schools.com/htmldom/dom_methods.asp will be of great use to you.

ishant7890

Thank you Very much sir.
It really helped me but my program has to insert a textbox in html also and for that i need to put it in body.How to do that?

letmehaveago

Below is an example.

// ==UserScript==
// @name           Alert
// @namespace      testing
// @include        http://www.google.com.au/
// ==/UserScript==

var input = document.createElement('input');
input.type = 'text';
input.value = 'testing';
document.body.appendChild(input);

This insides an input when you visit http://www.google.com.au/

But this example may be more helpful:

// ==UserScript==
// @name           Alert
// @namespace      testing
// @include        http://www.google.com.au/
// ==/UserScript==

var div = document.createElement('div');
div.innerHTML = "Something: <input type='text' value='testing' />";
document.body.appendChild(div);

You should be able to work out the rest by looking at there api.

letmehaveago

This will be the most useful:

// ==UserScript==
// @name           Alert
// @namespace      testing
// @include        http://www.google.com.au/
// ==/UserScript==

// will not be accessible later because exists in different scope
var test = function () {
    alert("Hello world");
}

var div = document.createElement('div');
div.innerHTML = "Something: " + "<input type='text' value='testing' />";

var go = document.createElement('input');
go.type = "button";
go.value = "go";
go.addEventListener("click", test, true); // only way to attach events

document.body.appendChild(div);
div.appendChild(go);

You can't use normal javascript because of security restrictions. I suggest you have a good look at http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started

ishant7890

var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.innerHTML ='function checkForvalue() { \
var testing = document.getElementById("compose_editorArea"); \
var doc = testing.contentDocument; \
alert(doc);}';

/scriptElement.innerHTML ='function checkForvalue() { alert("WELCOME TO CAIR"); }';/

document.getElementsByTagName("head")[0].appendChild(scriptElement);
window.addButton = function () {
// Get the location on the page where you want to create the button
var targetDiv = document.getElementById('navcontainer');

// Create a div to surround the button
var newDiv = document.createElement('div');
newDiv.setAttribute('id', 'autoCheckOrder');

// Create the button and set its attributes
var inputButton = document.createElement('input');
inputButton.name = 'autoCheckOrderButton';
inputButton.type = 'button';
inputButton.value = 'SendEN';
inputButton.setAttribute("onclick", "checkForvalue();");

// Append the button to the div
newDiv.appendChild(inputButton);
targetDiv.appendChild(newDiv);

}
addButton();

I m trying to read the contents of compose box in yahoo mail on pressing a new button which is added by this code.
The thing is it is an iframe,so m gettin error as
object HTMLDocument

where as if i use to read content of text area then it is successful
the code then used is
scriptElement.innerHTML ='function checkForvalue() { \
var testing = document.getElementById("to").value; \
alert(testing);}';
Please help,I want to read as well as write the contents of compose box on click of a button

letmehaveago

The thing is it is an iframe,so m gettin error as
object HTMLDocument

That isn't an error, it is saying "doc" is an HTMLDocument object.

"compose_editorArea" is the id of the iframe and your interested in the textarea inside it

var testing = document.getElementById("compose_editorArea"); \
var doc = testing.contentDocument; \
var textarea = doc.getElementById("text_area_id"); \
alert(textarea.value);

Where "text_area_id" is the id of the text_area input.

ishant7890

That is the problem sir,i dont have the id of textarea.In yahoo mail the compose box consists of IFRAME only.How to find out the text area id?

letmehaveago

http://getfirebug.com/

Get it and use it.

ishant7890

I tried with firebug also sir,its showing the same id "compose_editor area".
wat to do?

letmehaveago

Have you tried printing the tags inside the iframe

var testing = document.getElementById("compose_editorArea");
var doc = testing.contentDocument;
var textareas = doc.getElementsByTagName("textarea");
alert(textareas.length);

Alternatively, maybe contentEditable="true" is being used on the body of the iframe so you can get the text by doing the following:

var testing = document.getElementById("compose_editorArea");
var doc = testing.contentDocument;
var text = doc.body.innerHTML
alert(text);

Playing around with the above e.g. might not be body and textarea should yield the answer.

ishant7890

there is no textarea sir.so v cant get any value for that tag name.

letmehaveago

Please see the second solution as well about the contentEditable="true".

Basically my question to you is what is being edited?

If it isn't a textarea you must work out what it is. Again I believe firebug will help.

It might help if you could post a screenshot so I can have a look for myself.