浏览器控制台中的Javascript要求

Question

When entering javascript the in the browsers console window:

1)

The following code works:

alert('hi');

2)

The following doesn't:

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

where the myjs.js folder contains:

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

Explaining 2) the snippet of code entered in this case does cause the following code to appear at the end of the header tag in the source code:

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

but the function myfunc isn't being recognized, because I get the following error message:

VM132:5 Uncaught ReferenceError: myfunc is not defined

Which leads me to believe that as a security measure, browsers don't run javascript code that is edited after the page has loaded, or something along those lines.

QUESTION: Is there a workaround of some sorts here? Whether it be a function that works like require('...'); in most programming languages. but It can't be by installing any special extension, just something that works on the fly.

I move around a lot, and work on different computers, and would love to be able to use some of the code I have without needing to always carry a USB with me.

________________________ UPDATE ________________________

The solution @Jared Smith proposed worked perfectly. Now there is one instance where it doesn't work (and I understand why). When a site has a Content-Security-Policy that doesn't allow scripts to be loaded from other URLs or any connections to be loaded:

for instance:

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

And this makes perfect sense. My situation is that I have my own code that I run, however I wanted to be able to have this code stored on another site, and use it when I travel or am on other computers, without the need of extracting them from a USB.

Now I understand sites whitelisting what sources scripts are loaded from for security reasons, but I don't understand why there isn't an exception when it is done by the developers console . CSP is used mostly to prevent XSS attacks and such, but someone who is in the console is purposely using code and testing features.

QUESTION: Is there some feature in the console that might allow for scripts to be loaded from an alternative site? I have been fiddling with the Source Script Snippets but haven't been able to find an option. Or might there be some other unrelated work around?

Answer 1

this works:

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

...aaaaaand this works:

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

A bit of an explanation is in order here.

When you add a script tag with a src dynamically the browser will fire off a request for the JavaScript file. But this operation, unlike a regular tag initially on the page, is asynchronous , it doesn't block. What this means is that the next line of code (in your case a call to myfunc ) gets executed immediately, while the file is still being fetched. So if you want to defer code execution until after that script has been fetched, parsed, and executed, you need to register a callback. We can do this by listening for the script element's load event. There are two ways:

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

and assigning the function to the script elements onload property. The only real difference is that the addEventListener way allows you to attach multiple listeners, where as scr.onload can only have one value (like any other object property).