我正在动态地向<script>页面添加标签<head>,我希望能够以某种方式判断加载是否失败 - 404,加载脚本中的脚本错误等等.
在Firefox中,这有效:
var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);
Run Code Online (Sandbox Code Playgroud)
但是,这在IE或Safari中不起作用.
有没有人知道如何在Firefox以外的浏览器中使用它?
(我不认为需要在.js文件中放置特殊代码的解决方案是一个很好的解决方案.它不够优雅且不灵活.)
我正在使用以下JavaScript来动态加载样式表:
function set_stylesheet(name) {
var link = document.getElementById('userstylelink');
link.href = link.href.replace(/[^\/]+\.css$/, name + '.css');
}
Run Code Online (Sandbox Code Playgroud)
有没有办法确定是否成功加载了新的CSS文件?如果失败,我希望能够应用默认样式表.
前提:我已经找到了这两个答案,但我不明白我如何在许多库中对其进行sistematically应用:
检测并记录外部JavaScript或CSS资源无法加载的时间
我有一个Augular 1.x应用程序,它依赖于几个库,其中许多库托管在CDN或外部服务器上.不幸的是,当用户离线时,Internet连接无法正常工作或存在(CDN)服务器问题,某些库偶尔会无法下载并因此无法加载.
在这种情况下,我想向用户显示"有错误.请重新加载或稍后尝试"的视图.
我的怀疑是:鉴于在index.html中简单地加载了库(其中一些甚至是异步的):
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.css">
Run Code Online (Sandbox Code Playgroud)
对于CSS(头部)和
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>
Run Code Online (Sandbox Code Playgroud)
为JS(在身体的末尾)
如何检测即使是单个库的下载(加载)故障?(事实上,让我们说因为连接错误而无法加载Angular,整个应用程序将无法正常工作.但我有几个强制库)
或者我应该优先考虑可靠性(即本地加载库)而不是性能(即缓存的CDN)?此外,我认为重要的是要确保某些库(例如Google Apis)无法通过Bower 真正下载或安装.