javascript - 通过地址栏加载远程 JavaScript 文件

Question

是否可以从地址栏加载远程 JavaScript 文件？

我一直在尝试将其放入地址栏中：

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

我不会用它来做坏事。我只是在测试我的网站，仅此而已。如果你想保护你的网站，你必须先学会攻击它，对吧？

Answer 1

我想你应该能够做到以下几点：

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

这是一个非常有用的示例（将其粘贴到您的地址栏中）：

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

瞧：

事实上，这就是cornify.com在他们的书签中包含远程脚本的方式。

---

更新：

正如@Ben 在另一个答案中指出的那样，调用远程脚本中定义的函数并不是那么简单。Ben 为这个问题提出了一种解决方案，但也有另一种解决方案，cornify 正在使用的解决方案。如果您签出，http://cornify.com/js/cornify_run.js您会发现该文件中只有一个函数调用。您可以将funcname()调用放在单独的 JavaScript 文件中，就像cornify 所做的那样，因为脚本块保证按照它们插入的顺序执行。然后您必须包含两个脚本，如下例所示：

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

其中file_run.js简单地包括对funcname().

Answer 2

不是直接的答案，但仍然有帮助。

这是在书签中使用时加载到 javascript 文件中的脚本：

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

Answer 3

没有直接的方法可以做到这一点，但是一个常见的 hack 是运行几行 JavaScript 将标签插入当前页面，将其 src 属性设置为您要运行的脚本的 URL：

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

如果你想运行远程文件中定义的函数（funcname()在你的问题中），那就有点棘手了。这是因为通过标签加载脚本是异步运行的，因此文件很可能还没有完成加载，立即将元素添加到 DOM。我能想到解决这个问题的唯一方法是在插入元素之前定义一些函数，然后在包含的源文件的末尾调用它：

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

然后，您将doStuff在包含文件的末尾包含一个调用：

if(doStuff) doStuff();

最终结果如下所示：

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