浏览器控制台中的Javascript请求

在浏览器控制台窗口中输入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>

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

现在我了解了网站出于安全原因将脚本从哪些源加载到白名单中，但我不明白为什么在开发人员控制台执行时没有异常。CSP主要用于防止XSS攻击等，但控制台中的某些人故意使用代码和测试功能

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

这项工作：

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

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

…aaaaa而且这是有效的：

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

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

这项工作：

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

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

…aaaaa而且这是有效的：

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

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

---

这里需要一点解释

当您动态添加带有src的脚本标记时，浏览器将发出对JavaScript文件的请求。但与页面上最初的常规标记不同，此操作是异步的，不会阻塞。这意味着下一行代码（在您的例子中是对

myfunc

的调用）会立即执行，而文件仍在提取中。因此，如果您想将代码执行延迟到脚本被提取、解析和执行之后，那么需要注册回调。我们可以通过监听script元素的

load

事件来实现这一点。有两种方法：

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

---

并将函数分配给脚本元素

onload

属性。唯一真正的区别是，

addEventListener

方式允许您附加多个侦听器，其中as

scr.onload

只能有一个值（与任何其他对象属性一样）。

这里有一点说明

当您动态添加带有src的脚本标记时，浏览器将发出对JavaScript文件的请求。但与页面上最初的常规标记不同，此操作是异步的，不会阻塞。这意味着下一行代码（在您的例子中是对

myfunc

的调用）会立即执行，而文件仍在提取中。因此，如果您想将代码执行延迟到脚本被提取、解析和执行之后，那么需要注册回调。我们可以通过监听script元素的

load

事件来实现这一点。有两种方法：

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

---

并将函数分配给脚本元素

onload

属性。唯一的区别是，

addEventListener

方式允许您附加多个侦听器，其中as

scr.onload

只能有一个值（与任何其他对象属性一样）。

您需要等待脚本标记的

onload

事件。@JaredSmith怎么会这样？如果我进入一个页面，它完全加载，然后打开inspect元素，转到控制台，这就是我想要执行代码的时候。到那时，所有内容都已加载，但该错误仍然发生。

src.onload=function（）{myfunc（）；}。浏览器必须获取脚本src，这是一个异步操作，您必须使用回调。@JaredSmith哦，很有趣。因此，解决方案是只替换
myfunc（）带有
src.onload=function（）{myfunc（）；}？如果一个网站经常使用ajax，那么源代码永远不会完全加载，因此也不会进行调用吗？@JaredSmith我设法让它在Stackoverflow上工作，但并不是所有的网站都能工作。例如，如果一个站点有HTTPS，而wesite是HTTP，则有一个错误表示它必须是HTTPS。因此，显而易见的解决办法是创建一个使用HTTPS的站点和另一个使用相同代码的HTTP的站点。您是否看到其他可能导致某些站点出现问题的情况？您需要等待脚本标记的
onload
事件。@JaredSmith怎么会这样？如果我进入一个页面，它完全加载，然后打开inspect元素，转到控制台，这就是我想要执行代码的时候。到那时，所有内容都已加载，但该错误仍然发生。
src.onload=function（）{myfunc（）；}。浏览器必须获取脚本src，这是一个异步操作，您必须使用回调。@JaredSmith哦，很有趣。因此，解决方案是只替换
myfunc（）带有
src.onload=function（）{myfunc（）；}？如果一个网站经常使用ajax，那么源代码永远不会完全加载，因此也不会进行调用吗？@JaredSmith我设法让它在Stackoverflow上工作，但并不是所有的网站都能工作。例如，如果一个站点有HTTPS，而wesite是HTTP，则有一个错误表示它必须是HTTPS。因此，显而易见的解决办法是创建一个使用HTTPS的站点和另一个使用相同代码的HTTP的站点。您是否看到其他可能导致某些站点出现问题的情况？OP特别询问使用url源，而不是内联脚本。感谢您的回复John！但我想要的是使用另一个网站上的代码。对于您的代码片段，我必须记住所有代码并重写它。我想有一个自己的网站，上面有代码，这样我就可以很容易地访问。OP特别询问使用url源，而不是内联脚本。谢谢你的回复John！但我想要的是使用另一台计算机上的代码