Develop Reference

Force load JS script on page

I have a third party JS script with class Oreole defined there. This script is located on a CDN server elsewhere. I have this reference in my HTML:
<script src="https://someothercdn.com/oreole.js"/>
Later in my page script code I have
let oreole = new Oreole
Sometimes the CDN fails with 504 or 502 and my code crashes. Usually, page reload helps. But how do I force script reload on my page?
if (typeof(Oreole) == "undefined") {
//Do what exactly?
}

You should probably host oreole.js somewhere else, but if you want to go with unreliable cdn, you can do something like this using jquery
$.getScript("https://someothercdn.com/oreole.js", function() {
// do everything that needs oreole.js here
});
The page will keep running atleast, if oreole.js is not found or something happens only oreole part will crash

How to reload javascript without refreshing the page

We have some software which re-creates javascript files. We need to be able to re-load them into the DOM without refreshing the page. This means that the original javascript file (already loaded by the browser) has changed. Usually a refresh of the browser gets around this, but we can't do that due to losing state in other controls.
My searches for this have only returned results about refreshing the browser with javascript, which is not what I want.
Is it possible to reload the javascript file without refreshing the browse with only JavaScript (no JQuery/Angular or any third party library/framework etc)?

If your intention is to provide data or new widgets:
Vanilla AJAX is simple and ubiquitous. Do that.
If you're averse to that, for whatever reason, and if you're pulling new data exclusively from boxes you control, you could also give JSONP a try.
var s = document.createElement('script');
s.src = 'path/to/script-that-injects-data-or-NEW-widgets.js';
document.body.appendChild(s);
If your intention is to "upgrade" the page or replace functionality:
Just don't do this. While you can easily add new scripts, you can't reliably "cleanse" the page of old scripts or variables without a lot of bookkeeping. Unless your scripts are very very very simple, you can expect no small amount of trouble.
A better solution would be to notify the user of upgrades, ask them to refresh the page, and make sure your app can quickly reinitialize to it's previous state.
Ultimately, if you want to "upgrade" the application in-place, you'll want to refresh everything behind the scenes anyway. And that means you need to know how to rebuild everything to match the existing/prior state anyway. And, you could do this. But, it'll be easier to just refresh the page, which better ensures a clean, compatible state without a lot of fuss.

It is possible.
Have a look at lite-server:
Lightweight development only node server that serves a web app, opens it in the browser, refreshes when html or javascript change, injects CSS changes using sockets, and has a fallback page when a route is not found.
It uses BrowserSync internally, which:
... injects a small script into every page which communicates with the server via WebSockets. When an event occurs — such as a file modification or scroll action — the server sends an update notification to all connected devices.
If you cannot use 3rd-party code you can reimplement something like that yourself.

function loadScript(src, callback)
{
var script,
scriptTag;
script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = script.onreadystatechange = function() {
if (!this.readyState || this.readyState == 'complete' )
{
callback();
}
};
scriptTag = document.getElementsByTagName('script')[0];
scriptTag.parentNode.insertBefore(script, sriptTag);
}

Add another < script src="xxx"/ > tag to the bottom of your page. It should load the js and 'override' the objects defined in your previous script.

Dojo timing issue with dijit/registry and dojo/domReady

I am working on a one-page application in Dojo which submits forms via ajax and returns parses the return value before rendering the page. When I go about this I end up with a timing error.
When the following code is included via a script tag, it logs undefined:
require(["dijit/registry", 'dojo/domReady!'], function(registry){ console.log(registry.byId('my-id')) });
When I paste it in the console, I get the expected dijit widget.
I suspect that the problem is that this is firing before the page is rendered. Is there an easy way to ensure that this happens after the current document has been fully parsed and included in the main window?

May be you should try, to add Parser and call the Parser.parse() before trying to access the widget.
This is from Dojo documentation
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser

load page and execute javascript in a url

Hello wonderful stackoverflow users.
I have a question about url loading.
In many browsers and web viewers, there is the functionality to load a url to a website, but also a url to execute javascript.
Load a website: http://www.google.com
Load a script: javascript:alert("Hello!");
My question is, is there a way to load an http request as well as a javascript.
The answer is most likely no, but I want to confirm because I can't find any resources that describe this.
I was thinking it would be something like:
http://www.google.com&&javascript:alert("Hello!");
but the problem is, of course, this is not correct.
The reason why I am doing this is to provide a url that once it is clicked, it will also execute a certain javascript function. This will be in Android.
I appreciate any response, and understand that the answer may be no.

It all depends on whether you have control of the page being linked to. If you cannot modify the source of the linked page, then the answer is quite simply, no.
But, if it is your page, you can pass arguments in the hash, and then read the hash when the page loads and execute script accordingly.
window.onload = function () {
if (location.hash.indexOf("doSomething") > -1) {
// do something
}
};

You can execute javascript when a page loads using Browser plugins, such as GreaseMonkey for Firefox, or TamperMonkey for Chrome.
https://addons.mozilla.org/en-us/firefox/addon/greasemonkey/
http://tampermonkey.net/index.php?version=3.11&ext=dhdg&updated=true

External Javascript Timeout

I have a number of tracking scripts and web services installed on my website and I noticed when one of the services goes down, it still tries to call the external javascript file hosted on a different server. In Firefox, Chrome and other new browsers, there doesn't seem to be any issues when one of the services go down. However, in IE7 and IE8, my pages don't load all the way and time out before everything is displayed. Is there any way to add a time out on these javascript calls to prevent them from breaking my pages when they go down?

You can load them dynamically after page load with JS. If the JS files are on a different server, the browser will still show a "browser busy" indicator when you do that, but the original page will load.
If you can fetch the JS from your own site, you can load it with XMLHttpRequest after page load (or with your favorite JS library's helpers, e.g. jQuery's $.ajax(...)) and then eval it. This way the fetching itself won't show the browser-busy indicator.
To fetch the JS from your own site, you can download it from your tracking provider (which won't be officially supported but usually works) - just remember to refetch new versions every once in a while - or you can create a "forwarding" service on your own site that fetches it from the tracking provider and caches it locally for a while. This way your JS won't be in danger of staleness.
Steve Souders has more information about deferred loading of scripts and browser-busy indicators.

Try adding defer="defer"
The defer attribute gives a hint to
the browser that the script does not
create any content so the browser can
optionally defer interpreting the
script. This can improve performance
by delaying execution of scripts until
after the body content is parsed and
rendered.
Edit
This will prevent those scripts from running until the page loads:
function loadjs(filename) {
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
}
window.onLoad = function() {
loadJs("http://path.to.js");
loadJs("http://path.to2.js");
...
}

If you need to load external scripts and you want to enforce a timeout limit, to avoid having a busy indicator running for too long, you can use setTimeout() with window.stop() and, the IE equivalent:
http://forums.devshed.com/html-programming-1/does-window-stop-work-in-ie-1311.html
var abort_load = function() {
if(navigator.appName == "Microsoft Internet Explorer") {
window.document.execCommand('Stop');
} else {
window.stop();
}
};
/**
* Ensure browser gives up trying to load JS after 3 seconds.
*/
setTimeout(abort_load, 3000);
Note that window.stop() is the equivalent of the user clicking the stop button on their browser. So typically you'd only want to call setTimeout() after page load, to ensure you don't interrupt the browser while it's still downloading images, css and so on.
This should be combined with the suggestions made by orip, namely to load the scripts dynamically, in order to avoid the worst case of a server that never responds, resulting in a "browser busy" indicator that's active until the browser's timeout (which is often over a minute). With window.stop() in a timer, you effectively specify how long the browser can try to load the script.
Also note that setTimeout()'s interval is not that precisely interpreted by browsers so round up in terms of how much time you want to allow to load a script.
Also, one counter-indication to using window.stop() is if your page does things like scroll to a certain position via js. You might be willing to live with that but in any case you can make the stop() conditional on NOT having already loaded the content you expected. For example if your external JS will define a variable foo, you could do:
var abort_load = function() {
if (typeof(foo) == "undefined") {
if(navigator.appName == "Microsoft Internet Explorer") {
window.document.execCommand('Stop');
} else {
window.stop();
}
}
};
This way, in the happy path case (scripts do load within timeout interval), you don't actually invoke window.stop().