在CDN被阻止或不可用的情况下,可以通过以下方法加载本地脚本文件作为后备:
<script>
标签中使用onerror
事件来捕获加载失败的情况,并在事件处理函数中加载本地脚本文件。<script src="https://cdn1.example.com/script.js" onerror="loadLocalScript()"></script>
<script src="https://cdn2.example.com/script.js" onerror="loadLocalScript()"></script>
<script>
function loadLocalScript() {
var script = document.createElement('script');
script.src = 'local_script.js';
document.head.appendChild(script);
}
</script>
fallback
参数来指定备用脚本文件的地址。<script src="https://cdn.example.com/script.js?fallback=local_script.js"></script>
// 注册Service Worker
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
console.log('Service Worker 注册成功');
}).catch(function(error) {
console.log('Service Worker 注册失败', error);
});
// service-worker.js
self.addEventListener('fetch', function(event) {
var request = event.request;
var url = new URL(request.url);
// 拦截CDN请求
if (url.origin === 'https://cdn.example.com') {
event.respondWith(
fetch('local_script.js')
);
}
});
以上是在CDN被阻止或不可用的情况下加载本地脚本文件作为后备的几种方法。根据具体情况选择适合的方法来保证网页的正常加载和运行。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云