Calling external javascript function through url bar

Question

I want to use javascript in the url bar to manipulate the rendered html of a given page. Please note that I'm not trying to do something illegal here. Long story short, my university generates a weekly schedule based on your courses. I'd like to use javascript to add a button on the generated schedule page that will allow you to push the schedule to a google calendar. Unfortunately, I can't just go and edit the source itself (obviously), so I figured I would use javascript to edit the page once it has been rendered by my browser. I'm having some trouble calling an external javascript file to parse the rendered html.

As it is, this is what I have:

javascript:{{var e=document.createElement('script');
e.src = http://www.url.of/external/js/file.js';
e.type='text/javascript';
document.getElementsByTagName('head')[0].appendChild(e);}
functionToCall(document.body.innerHTML);}

Which, when pasted into the URL bar, SHOULD add my javascript file to the head and then call my function. Any help would be greatly appreciated, thanks!

EDIT: Here's a working example if you're interested, thanks everyone!

javascript:(function(){var e=document.createElement('script');
e.src = 'http://www.somewebsite.net/file.js';
e.type='text/javascript';e.onload =function(){functiontocall();};
document.getElementsByTagName('head')[0].appendChild(e);})();

You dont allow any time for your javascript file to be loaded. hook into e.onload — Raynos
– Raynos, Commented Mar 8, 2011 at 23:41
I'm a little unsure of how to do this. I've tried javascript:{{var e=document.createElement('script');e.src = 'http://www.impiety.net/calendar.js';e.type='text/javascript';; document.getElementsByTagName('head')[0].appendChild(e);e.onload(test())} e.onload(test());} and neither seem to work — Blind
– Blind, Commented Mar 8, 2011 at 23:54
You're missing the ' after e.src = in your first example. — Mateen Ulhaq
– Mateen Ulhaq, Commented Mar 9, 2011 at 1:06
You might want to google for "bookmarklet" and find some examples — dkretz
– dkretz, Commented Mar 9, 2011 at 2:21
It's never* illegal to run a bookmarklet on a webpage. (*I'm sure someone will come up with some way to make it illegal) — zzzzBov
– zzzzBov, Commented Mar 10, 2011 at 4:35

Sean Vieira · Accepted Answer · 2011-03-08 23:59:55Z

1

If you need the code to execute once it is loaded you can do one of two things:

Execute functionToCall(document.body.innerHTML); at the bottom of your script (http://www.url.of/external/js/file.js) rather than at the end of your bookmarklet.
Use e.onload = function(){ functionToCall(document.body.innerHTML); }; after e.type='text/javascript' near the end of your JavaScript snippet / bookmarklet, rather than calling functionToCall right after appending e to the document head (since e will most likely not have been loaded and parsed right after appendChild(e) is called.

answered Mar 8, 2011 at 23:59

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Blind Over a year ago

Neither seem to work. Perhaps I've constructed my .js file wrong? I'm using

javascript:{var e=document.createElement('script');e.src = 'http://www.impiety.net/calendar.js';e.type='text/javascript';e.onLoad = function(){test();}; document.getElementsByTagName('head')[0].appendChild(e);}

and it isn't working

Sean Vieira Over a year ago

@Blind -- wrap the whole thing in a function expression: javascript:(function(){//your_code_here;})(); and it should all just work

Blind Over a year ago

@Sean Vieira - are you saying to take the actual code body and just throw it in there, or to put the stuff from above in there? Because

javascript:(function(){var e=document.createElement('script');e.src = 'http://www.impiety.net/calendar.js';e.type='text/javascript';e.onLoad = function(){test();}; document.getElementsByTagName('head')[0].appendChild(e);})();

doesn't work either

Patrick Horn Over a year ago

Perhaps you should try something simpler so you can debug your expression. A good idea would be to open up the javascript console so you can see the errors. The obvious error in your code snippet is using "onLoad" instead of "onload", but there may be others, too. Perhaps try getting it to work as normal javascript code first.

Blind Over a year ago

Wow, thats really odd, I swear I changed that and it didn't work. Maybe I messed something else up without realizing it. Either way, thank you all so much for your help, you guys rock :D

|

zzzzBov · Accepted Answer · 2011-03-10 04:31:13Z

I see that you've accepted an answer, and that's perfectly valid and great, but I would like to provide a useful tool I made for myself.

It's a bookmarklet generator called zbooks.
_{(Yes it's my website, no I'm not trying to spam you, there are no ads on that page, I gain nothing from you using it)}

It's jQuery enabled and I think it's simple to use (but I built it, so who knows). If you need an extensive explanation of how to use it, let me know so I can make it better. You can even browse over the source if you'd like.

The important part is the business logic that gets jQuery on the page:

//s used for the Script element
    var s = document.createElement('script');
    //r used for the Ready state
    var r = false;
    //set the script to the latest version of jQuery
    s.setAttribute('src', 'http://code.jquery.com/jquery-latest.min.js');
    //set the load/readystate events
    s.onload = s.onreadystatechange = function()
    {
/**
 * LOAD/READYSTATE LOGIC
 * execute if the script hasn't been ready yet and:
 * - the ready state isn't set
 * - the ready state is complete
 *   - note: readyState == 'loaded' executes before the script gets called so
 *     we skip this event because it wouldn't have loaded the init event yet.
 */
      if ( !r && (!this.readyState || this.readyState == 'complete' ) )
      {
        //set the ready flag to true to keep the event from initializing again
        r = true;
        //prevent jQuery conflicts by placing jQuery in the zbooks object
        window.zbooks = {'jQuery':jQuery.noConflict()};
        //make a new zbook
        window.zbooks[n] = new zbooks(c);
      }
    };
    //append the jQuery script to the body
    b.appendChild(s);

Hello71 · Accepted Answer · 2011-03-09 02:18:45Z

0

Can't you use a proper tool like Greasemonkey?

answered Mar 9, 2011 at 2:18

Hello71

8169 silver badges18 bronze badges

Collectives™ on Stack Overflow

Calling external javascript function through url bar

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related