Load remote JavaScript files via the address bar

爱⌒轻易说出口 提交于 2019-12-04 03:15:46
Daniel Vassallo

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().

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);

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);
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!