Question

在浏览器控制台窗口中输入javascript：

1）

以下代码有效：

alert('hi');

2）

以下内容不是：

(function() {
var scr = document.createElement('script');
scr.src = 'http://www.myrandomwebsite.com/myjs.js';
document.head.appendChild(scr);
myfunc();
})()

myjs.js 文件夹包含：

var myfunc = function(){alert('hi')};

解释2） 在这种情况下输入的代码片段会导致以下代码显示在源代码中标题标记的末尾：

<script src="http://www.myrandomwebsite.com/myjs.js"></script>

但无法识别函数 myfunc ，因为我收到以下错误消息：

VM132：5未捕获的ReferenceError：myfunc未定义

这让我相信，作为一种安全措施，浏览器不会运行在页面加载后编辑的javascript代码，或者沿着这些行编写的内容。

问题：这里有一些解决方法吗？在大多数编程语言中，它是否像require('...');一样工作。 但不能安装任何特殊扩展程序，只是即时运行。

我经常移动，在不同的计算机上工作，并希望能够使用我的一些代码，而无需随身携带USB。

________________________ 更新 ________________________

@Jared Smith提出的解决方案完美无缺。现在有一个实例，它不起作用（我理解为什么）。当站点具有不允许从其他URL或任何要加载的连接加载脚本的Content-Security-Policy时：

例如：

Content-Security-Policy: script-src 'self' https://apis.google.com
Content-Security-Policy: connect-src 'self' https://apis.google.com

这很有道理。我的情况是我有自己运行的代码，但是我希望能够将这些代码存储在另一个站点上，并在我旅行时或在其他计算机上使用它，而无需从USB中提取它们。

现在我了解网站将安装源脚本的内容列入白名单，但出于安全原因，我不明白为什么在开发人员控制台完成时没有例外。 CSP主要用于防止XSS攻击等，但是控制台中的某个人故意使用代码和测试功能。

问题：控制台中是否有某些功能可能允许从备用站点加载脚本？我一直在摆弄源脚本片段，但一直无法找到选项。或者可能还有一些其他无关的工作？

Answer 1

这有效：

var scr = document.createElement('script');
scr.text = 'function sayHi() { alert("hi")}';
document.head.appendChild(scr);
sayHi()

... aaaaa这个有效：

var scr = document.createElement('script');
scr.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';
scr.onload = function() {
  $(function(){
    $('body').css({backgroundColor: 'red'});
  });
}
document.head.appendChild(scr);

Answer 2

这里有一点解释。

当您动态添加带有src的脚本标记时，浏览器将触发对JavaScript文件的请求。但是，与最初在页面上的常规标记不同，此操作是异步，它不会阻止。这意味着下一行代码（在您的情况下是对myfunc的调用）会立即执行，而文件仍在被提取。因此，如果您希望将代码执行推迟到获取，解析和执行该脚本之后，则需要注册回调。我们可以通过监听脚本元素的load事件来做到这一点。有两种方法：

scr.addEventListener('load', function() { myfunc(); });

并将函数分配给脚本元素onload属性。唯一真正的区别是addEventListener方式允许您附加多个侦听器，而scr.onload只能有一个值（就像任何其他对象属性一样）。

Javascript需要在浏览器控制台中

2 个答案: