猿问

如何判断<script>标签是否加载失败

我正在向<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);

但是，这在IE或Safari中不起作用。


有谁知道在Firefox以外的浏览器中实现此目的的方法吗？


（我认为不需要在.js文件中放置特殊代码的解决方案是一个很好的解决方案。它既笨拙又不灵活。）


慕哥6287543
浏览 2871回答 3
3回答

茅侃侃

Erwinus的脚本效果很好，但是编码却不太清楚。我自由地清理它并破译它在做什么。我进行了以下更改：有意义的变量名使用prototype。require() 使用参数变量alert()默认情况下不返回任何消息修复了一些语法错误和我遇到的范围问题再次感谢Erwinus，该功能本身已经存在。function ScriptLoader() {}ScriptLoader.prototype = {&nbsp; &nbsp; timer: function (times, // number of times to try&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;delay, // delay per try&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;delayMore, // extra delay per try (additional to delay)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;test, // called each try, timer stops if this returns true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;failure, // called on failure&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;result // used internally, shouldn't be passed&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; var me = this;&nbsp; &nbsp; &nbsp; &nbsp; if (times == -1 || times > 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result = (test()) ? 1 : 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.timer((result) ? 0 : (times > 0) ? --times : times, delay + ((delayMore) ? delayMore : 0), delayMore, test, failure, result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, (result || delay < 0) ? 0.1 : delay);&nbsp; &nbsp; &nbsp; &nbsp; } else if (typeof failure == 'function') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(failure, 1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; addEvent: function (el, eventName, eventFunc) {&nbsp; &nbsp; &nbsp; &nbsp; if (typeof el != 'object') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (el.addEventListener) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.addEventListener(eventName, eventFunc, false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (el.attachEvent) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.attachEvent("on" + eventName, eventFunc);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; },&nbsp; &nbsp; // add script to dom&nbsp; &nbsp; require: function (url, args) {&nbsp; &nbsp; &nbsp; &nbsp; var me = this;&nbsp; &nbsp; &nbsp; &nbsp; args = args || {};&nbsp; &nbsp; &nbsp; &nbsp; var scriptTag = document.createElement('script');&nbsp; &nbsp; &nbsp; &nbsp; var headTag = document.getElementsByTagName('head')[0];&nbsp; &nbsp; &nbsp; &nbsp; if (!headTag) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var f = (typeof args.success == 'function') ? args.success : function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; args.failure = (typeof args.failure == 'function') ? args.failure : function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var fail = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!scriptTag.__es) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.__es = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.id = 'failed';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; args.failure(scriptTag);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.onload = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.id = 'loaded';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; f(scriptTag);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.type = 'text/javascript';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.async = (typeof args.async == 'boolean') ? args.async : false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.charset = 'utf-8';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.__es = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.addEvent(scriptTag, 'error', fail); // when supported&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // when error event is not supported fall back to timer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me.timer(15, 1000, 0, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return (scriptTag.id == 'loaded');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (scriptTag.id != 'loaded') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scriptTag.src = url;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headTag.appendChild(scriptTag);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } catch (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fail();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, 1);&nbsp; &nbsp; &nbsp; &nbsp; }, (typeof args.delay == 'number') ? args.delay : 1);&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; }};$(document).ready(function () {&nbsp; &nbsp; var loader = new ScriptLoader();&nbsp; &nbsp; loader.require('resources/templates.js', {&nbsp; &nbsp; &nbsp; &nbsp; async: true, success: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('loaded');&nbsp; &nbsp; &nbsp; &nbsp; }, failure: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('NOT loaded');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答