Use of public CDN
When I started to develop my blog, I used bootcdn and found that they were hacked. Although we want to scold those “hackers”, we have no way to prevent them. We can only solve the problem from our own website.
At that time, I didn’t have the technology to solve this problem. I searched the Internet and most of them only asked questions but not solutions…
Now try to solve the problem for the time being. (everything is based on the premise that the source station is not hacked)
Thinking plan
Browser loading JS is executed in sequence. Async and defer are not mentioned here, only onerror is mentioned.
Consider the following HTML (chrome test)
<head>
//---- method 1-----
<script onerror="this.src='mystatic/jquery.min.js'"></script>
// ------- END -------
//---- method 2-----
<script>
function exchange(e, s){
let new_s = document.createElement('script');
new_s.src = s;
document.head.insertBefore(new_s, e);
e.remove();
}
</script>
<script onerror="exchange(this, 'mystatic/jquery.min.js')">
</script>
// ------- END -------
</head>
<body>
<div id="main">something</div>
<script>
window.onload = ()=>{
$('#main').text('other thing');
}
</script>
</body>- Method 1: sprout new mistakes. The browser only requests bootcdn and modifies SRC after failure. However, JS file is different from img, and the browser will not download it
mystatic/jquery.min.jsInstead, it goes down to$There was an error. - Method 2: the browser requests bootcdn and executes after failure
exchangeFunction to create a new<script>Replace bootcdn. The browser was observed to downloadmystatic/jquery.min.jsThe onload function is executed correctly and the test is successful.
So why not just use the second method?—-Here’s how to handle no refresh loading.
Improvement and optimization
- Onload problem
If you enter a page from no refresh load page.html And there’s one page.js Files need to be monitoredwindow.onloadTo perform the operation. Obviously, when there is no refresh loading, onload has already been triggered before. JQuery’s $(document). Ready() can solve this problem, which is solved by native JS.
function domready(callback) {
if (document.readyState === 'complete') {
callback();
} else {
let c = function () {
callback();
window.removeEventListener('load', c);
};
window.addEventListener('load', c);
}
}When loading JS, check readyState if DOM has been loaded. Then you don’t have to listen to onload and execute it directly. On the contrary, normal monitoring.
- JS dependency problem
If page.js To initialize, you need to use highlightjs, just add highlightjs first and then page.js reach<head>There’s no guarantee page.js This will be done after the download of JS highlight. For details, please execute synchronization