Load remote JavaScript files via the address bar

问题:

Is it possible to load remote JavaScript files from the address bar?

I have been trying to put this into the address bar:

javascript:src='http://depot.com/file.js';funcname();

I'm not using this for bad things. I'm just testing my site, that's all. If you wanted to protect your site you must learn to attack it first, right?

回答1:

I guess you should be able to do the following:

javascript:(function () {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://depot.com/file.js';
  document.getElementsByTagName('body')[0].appendChild(newScript);
})();

Here's a very useful example (paste this in your address bar):

javascript:(function () {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://cornify.com/js/cornify.js';
  document.getElementsByTagName('body')[0].appendChild(newScript);

  for (var i = 0; i < 5; i++) {
    newScript = document.createElement('script');
    newScript.type = 'text/javascript';
    newScript.src = 'http://cornify.com/js/cornify_run.js';
    document.getElementsByTagName('body')[0].appendChild(newScript);
  }
})();

Voila:

In fact, this is how cornify.com is including the remote scripts in their bookmarklet.

---

UPDATE:

As @Ben noted in the other answer, it's not that straightforward to call a function defined in your remote script. Ben suggests one solution to this problem, but there is also another solution, the one that cornify are using. If you check out http://cornify.com/js/cornify_run.js you'll see that there's just one function call in that file. You could place your funcname() call in a separate JavaScript file, as cornify are doing, because script blocks are guaranteed to be executed in the order they are inserted. Then you'd have to include both scripts, as in the following example:

javascript:(function () {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://depot.com/file.js';
  document.getElementsByTagName('body')[0].appendChild(newScript);

  newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://depot.com/file_run.js';
  document.getElementsByTagName('body')[0].appendChild(newScript);
})();

Where the file_run.js simply includes a call to funcname().

回答2:

There is no direct way of doing this, however a common hack is to run a few lines of JavaScript that inserts a tag into the current page, setting its src attribute to the URL of the script that you want to run:

javascript:var s=document.createElement("script");s.src="http://depot.com/file.js";s.type="text/javascript";document.getElementsByTagName("body")[0].appendChild(s);

If you want to run a function defined in the remote file (à la funcname() in your question), that's a bit more tricky. This is because the loading of scripts via a tag is run asynchronously and so file most likely hasn't finished loading immediately adding the element to the DOM. The only way I can think of getting around this is to define some function before you insert the element, which you then call at the end of the included source file:

function doStuff() {
    // run code that depends on the included JS file
};
// include the external script, as per the snippet above

You'd then include a call to doStuff at the end of the included file:

if(doStuff) doStuff();

The final result looks something like this:

javascript:function doStuff(){funcname()};var s=document.createElement("script");s.src="http://depot.com/file.js";s.type="text/javascript";document.getElementsByTagName("body")[0].appendChild(s);

回答3:

Not directly an answer, but helpful nonetheless.

Here is a script to load in a javascript file when used in a bookmark:

javascript:var%20e=document.createElement('script');e.setAttribute('language','javascript');e.setAttribute('src','http://github.com/balupton/ajaxy-bookmark/raw/master/script.js');document.body.appendChild(e);void(0);