浏览器控制台中的Javascript要求

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

... aaaaaa，这可行：

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只能具有一个值（就像其他任何对象属性一样）。