www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

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

  1. #1
    Join Date
    Jul 2010
    Posts
    20

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

    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 ?

  2. #2
    Join Date
    Feb 2010
    Posts
    184

  3. #3
    Join Date
    Jul 2010
    Posts
    20
    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?

  4. #4
    Join Date
    Jul 2010
    Posts
    20
    Mail client i meant whenever gmail is opened from this particular computer using firefox,it shud take care of the modifcation

  5. #5
    Join Date
    Feb 2010
    Posts
    184
    Try reading into http://wiki.greasespot.net/FAQ/ and http://userscripts.org./ first. Someone else has probably written it already.

  6. #6
    Join Date
    Jul 2010
    Posts
    20
    First link does not exist and in second link i cudnt find what m lukin 4..

  7. #7
    Join Date
    Feb 2010
    Posts
    184
    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.

  8. #8
    Join Date
    Jul 2010
    Posts
    20
    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

  9. #9
    Join Date
    Feb 2010
    Posts
    184
    You need to install grease monkey in firefox.

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

    Code:
    // ==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.

  10. #10
    Join Date
    Jul 2010
    Posts
    20

    Thumbs up

    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?

  11. #11
    Join Date
    Feb 2010
    Posts
    184
    Below is an example.

    Code:
    // ==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:

    Code:
    // ==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.

  12. #12
    Join Date
    Feb 2010
    Posts
    184
    This will be the most useful:

    Code:
    // ==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/inde...etting_Started

  13. #13
    Join Date
    Jul 2010
    Posts
    20

    reading content from iframe

    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

  14. #14
    Join Date
    Feb 2010
    Posts
    184
    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

    Code:
    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.

  15. #15
    Join Date
    Jul 2010
    Posts
    20
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles