IE 下的脚本 onload/onerror(用于延迟加载)问题

2024-01-23

我正在重建我的延迟加载模块以接受异步请求,但我有一个大问题:
Internet Explorer 不支持 script.onload/onerror!!!

旧脚本确实全局评估了使用 ajax 同步调用读取的目标脚本源, 它工作得很好,它是跨浏览器的,我可以让它异步编辑 1 个变量,但调试起来非常棘手(所有源代码都在一行中执行,浏览器不会提供太多有关错误的信息,将代码除以与正则表达式的行是不可能的,因为 js 具有无限深度的块,而正则表达式根本不擅长于此)。

这是我用来创建脚本的代码(经典):

var script = document.createElement('script');
script.type = 'text/javascript';
script.src =name;
script.name =name;
script.async = true;
script.onload=<my_onload_code>;
script.onerror=<my_onerror_code>;

它不适用于 IE,因为它不支持脚本的 onload 和 onerror;
下面的代码是一个修复,但仅在脚本不是异步时才有效

if(script.onreadystatechange!==undefined)//only IE T_T
            script.onreadystatechange = function() {
                    if (script.readyState == 'loaded')//ERROR LOADING
                        <my_onerror_code>;
                    else
                    if(script.readyState == 'complete')//loaded
                        <my_onload_code>;

            };

我可以每隔 X 毫秒测试一次,直到加载脚本,但这是一个丑陋的解决方案,我想避免它。

EDIT:这是我尝试每隔 X 毫秒检查脚本是否已加载的代码,它并没有那么糟糕,而且比 ajax 效果更好;问题是我不知道脚本加载成功还是错误(onload 或错误)。

var script = document.createElement('script');
script.type = 'text/javascript';
script.src =name;
script.name =name;
script.async = true;

    script.onload=function(){Lazy_loader.onload(this);};
    script.onerror=function(){Lazy_loader.onerror(this);};

    if(script.onreadystatechange!==undefined){//ie fix T_T 
        script.timer=setInterval(function(){
                    if (script.readyState == 'loaded' || script.readyState == 'complete')}//ERROR LOADING

                        if(LOADED???)//loaded
                            Lazy_loader.onload(script);
                        else
                            Lazy_loader.onerror(script);

                        clearInterval(script.timer);
                    }

                    },100);

    }

document.getElementsByTagName('head')[0].appendChild(script);

我尝试使用 addEventListener/attachEvent 函数,但它似乎不起作用(即使使用来自网络的 addEvent 函数)

总结选项似乎是:

  • 使用AJAX和全局eval加载脚本(调试地狱)
  • 仅在 IE 中使用 AJAX 和全局 eval(可能是一个解决方案,我不使用 IE)
  • 仅当脚本包含错误时才使用 AJAX 和全局 eval(我需要检查计时问题,因为使用我的代码,即使调用是异步的,我也会“模拟”同步代码)
  • 每 X 次测试 script.onreadystatechange (仅在 IE 上),直到加载(丑陋!!!)
  • 使用 window.onload :避免,它需要对所有页面充电,我需要在仅启动一个脚本时调用它(请参阅尾页的详细信息)
  • 在每个脚本的源代码上添加代码(避免像尾页上所说的那样)
  • 修复 IE 的 script.onload(使用 addEventListener/attachEvent?!?)

PLEASE PAY ATTENTION:
i don't want to use window.onload because it's fired only when ALL the page is loaded,i need to fire it when only the target script is loaded(my lazy loading script is a lot more complex so please don't ask why);
i DO NOT WANT to use ANY third party library(like jquery,prototype,etc.),
i don't even want to edit the target script source(like when using JSPON or adding a script to alert that the script is loaded).

希望这还不算太多! 谢谢。


这是一种解决方案: 如果是 IE,我将简单地使用异步 ajax 调用加载文本,然后将 script.text 设置为加载的数据。 IE 似乎锁定了 onload 和 onerror(出于安全原因?)而不是 script.text(其他一些浏览器可能不允许它出于安全原因以防止像 iframe 上的 XSS 攻击),我不知道为什么微软不能简单地尊重标准,我只是讨厌 ie 和“技巧”来解决他们的设计问题。

    var script = document.createElement('script');
    script.type = 'text/javascript';      
    //---start IE fix--- 
    if(window.ActiveXObject){//ie fix T_T 
            var xmlhttp=null;
            try {
                xmlhttp = new XMLHttpRequest();
            }catch(e){
                try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }catch(e){
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
            }  
            xmlhttp.onreadystatechange  = function() {
            try{
                if(this.done!==undefined)
                    return;

                if(this.status >= 200 && this.status < 300){//loaded
                    this.done=true;
                    script.text=this.responseText;
                    document.getElementsByTagName('head')[0].appendChild(script);
                    Lazy_loader.onload({name:name});
                }
                if(this.status >= 400){
                    this.done=true;
                    Lazy_loader.onerror({name:name});
                    }
                }catch(e){}
            };
            xmlhttp.open('get',name,true);                             
            xmlhttp.send(null); 

        }
        else{//browser that support script.onload/onerror
            script.src =name;
            script.name =name;
            script.async = true;  
            script.onload=function(){Lazy_loader.onload(this);};
            script.onerror=function(){Lazy_loader.onerror(this);};
            document.getElementsByTagName('head')[0].appendChild(script); 
        }
        //---end IE fix---

这在大多数浏览器上运行良好(IE/chrome/firefox 目前已测试)并且我测试了加载 3 个文件:

  • file1 加载时间为 4s
  • file2 出现 500 错误
  • file3 加载时间为 1 秒

它们在所有浏览器中总共加载了 40XX 毫秒(浏览器需要一些额外的时间来调用 onload/onerror 脚本),我还可以(使用我的惰性加载器脚本)模拟同步加载仅在之后执行代码队列中的所有文件均已加载。

如果您知道更好的方法或者您知道此实现中可能出现的错误,请回复! 谢谢!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

IE 下的脚本 onload/onerror(用于延迟加载)问题 的相关文章

  • 在数组/对象中查找项目的最快方法

    在 Javascript AS3 中查找列表或对象中项目的索引的最快方法是什么 我对这两种语言都提出这个要求 因为这两种语言的语法相似 假设 myArray one two three myObject one 1 two 2 three
  • 根据嵌套值使用数组过滤对象数组

    我正在尝试根据某些嵌套对象过滤数组 我准备了一些Fiddle http jsfiddle net NZnN2 249 输入数组如下所示 let arrayOfElements name a subElements surname 1 sur
  • 邮件附件媒体类型错误 Gmail API

    我正在尝试通过 Javascript 客户端中的 Gmail API 发送带有附加 jpeg 文件的消息 到目前为止我写的代码如下 ajax type POST url https www googleapis com upload gma
  • 允许指针(单击)事件穿过元素,同时保持滚动功能

    我的目标是拥有一个允许 下面要点击 交互的元素 滚动 众所周知 1 的解是pointer events none 这正如中所描述的单击 DIV 到底层元素 https stackoverflow com questions 3680429
  • 如何在CKEditor 5中监听焦点事件

    我想听一下 CKEditor 5 中的焦点事件 我认为这样的事情会起作用 但回调从未被调用 document querySelector editable ClassicEditor create el then editor gt edi
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • 记录jQuery中调用的方法和参数

    假设我有 jQuery 并且加载了几个插件 我运行一些这样的代码 someSelector someMethod someParam someOtherParam someOtherSelector someOtherMethod anot
  • 通过 HTML5 文件和 URL API 正确创建和提供 PDF Blob

    好吧 假设我有文档数据存储在某处 让我们任意取this pdf http www grida no climate ipcc tar wg1 pdf tar 01 pdf 问题 1 我想要做的是对此 URL 进行 AJAX 调用 因为我需要
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • 为什么“dtoa.c”包含这么多代码?

    我将是第一个承认我对低级编程的整体知识有点稀疏的人 我理解许多核心概念 但我不经常使用它们 话虽这么说 我对需要多少代码感到非常惊讶dtoa c http www netlib org fp dtoa c 在过去的几个月里 我一直致力于用
  • React:React 如何确保在浏览器有机会绘制之后调用 useEffect?

    useLayoutEffect 的文档说 useLayoutEffect 内计划的更新将被刷新 在浏览器有机会绘制之前同步进行 useEffect 的文档说 与 componentDidMount 和 componentDidUpdate
  • History.replaceState 仍然向“浏览历史记录”添加条目

    具体来说 调用以下代码片段 history replaceState undefined undefined value 正确地不会影响当前页面的后退按钮行为 但是will在 浏览历史记录 页面添加一个条目 这是我不想要的 下图是 Chro
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • 正则表达式 - 避免表达式中出现字符串

    我正在尝试创建一个应该匹配以下情况的正则表达式 如果单词完全匹配 first second third 那么匹配应该失败 但如果它周围有任何字符 那么应该匹配该字符串 我还需要避免字符串中的某些字符集 如果这些字符是字符串的一部分 则匹配结
  • 禁用任何类型的浏览器窗口滚动?

    有没有办法禁用滚动 不仅仅是滚动条 还有浏览器窗口的全部功能 根据您对 Keit 的回答 您不想在打开灯箱时滚动处于活动状态 如果是这种情况 您可以使用以下 css 在打开灯箱的同时向正文添加一个类 这个解决方案的好处是它保留了滚动 空间
  • 如何检查jquery数据表中的每个复选框?

    我有一个第一列带有复选框的表格 我使用 jQuery DataTable 插件显示我的表格 我制作了 2 个链接来选择 取消选择每个复选框 这是选择全部的一个 a href Select all a 和 JavaScript functio
  • Jade(当前称为“Pug”)模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可
  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns

随机推荐

  • 如何以编程方式操作 Windows 桌面图标位置?

    几年前 我天真地尝试编写一个小应用程序来保存我战术性放置的桌面图标 因为当某些事件重置它们时 我厌倦了将它们拖回原来的位置 在花费了太多时间未能找到一种方法来查询 更不用说保存和重置 我的图标的桌面位置后 我放弃了 有人知道 Windows
  • 如何使用 Rust 从 stdin 创建高效的字符迭代器?

    现在既然Read chars https doc rust lang org nightly std io trait Read html method chars迭代器已被正式弃用 https github com rust lang r
  • 如何从字符串中删除所有子字符串

    如何从字符串中删除该模式的所有实例 string str red tuna blue tuna black tuna one tuna string pattern tuna 从字符串中删除该模式的所有实例 include
  • java中抽象类和接口的最佳实践

    因此 您已经有了一个接口和一个实现接口中方法的子集的抽象类 您还拥有一些继承抽象类并提供抽象类未提供的方法的实现的类 那么这里的最佳实践是什么 我正在谈论这样的问题 1 抽象类应该实现接口还是它的子类 每节课都应该吗 在我看来 抽象类就应该
  • 将 MS Word 表格单元格提取为图像?

    我需要将表格单元格提取为图像 单元格可能包含混合内容 文本 图像 我需要将其合并为单个图像 我能够获得核心文本 但我不知道如何获得图像 文本 不确定 Apac POI 是否有帮助 之前有人做过类似的事情吗 public static voi
  • 使用 WPF 时的数据绑定问题

    我一直在努力学习Visual C 最近 我一直在关注WPF 这是我一直在制作的教程的链接 http msdn microsoft com en us library vstudio ms752299 v vs 110 aspx http m
  • JavaScript 加载顺序导致问题

    我在标头中有一个 JS 文件 这是用于 Google DFP 的 在 我发现如果头 JS 文件没有在底部文件之前加载 我会在 Chrome 控制台中收到此错误 Uncaught TypeError Object has no method
  • SQL Server - 缺少 NATURAL JOIN / x JOIN y USING(字段)

    我刚刚阅读了 NATURAL JOIN USING SQL92 功能 这些功能 遗憾的是 在 SQL Server 当前的功能中缺失了 有没有人从支持这些的 DBMS 转到 SQL Server 或其他不支持的 DBMS 它们是否像听起来那
  • Matplotlib imshow,基于缩放动态重采样

    我试图在 matplotlib 中复制 MATLAB imagesc 调用的行为 具体来说 对于非常大的图像 减少图像 当用户放大时 以较少的抽取显示图像 我已经编写了一个可以做到这一点的类 但我的解决方案似乎过于复杂 有人知道更好的方法吗
  • iOS上的BLE技术从哪一点入手

    我需要使用BLE技术进行开发 我找到了一些介绍和源码 http processors wiki ti com index php Category IPhone4SBLEDemo http processors wiki ti com in
  • 计算一个 div 可以容纳多少个字符(来自字符串)而不使其换行?

    所以我有一个 div div 我想知道在换行到下一行之前 字符串可以容纳多少 长度 脚本应考虑元素的宽度 真实宽度 clientWidth 左右边距以及左右内边距 div div 而 JavaScript 假设魔法函数是calculate
  • 将谷歌广告添加到Android应用程序

    我正在尝试将谷歌广告添加到我的应用程序 这是我第一次 我也添加了 jar 文件 这是 xml
  • MS Chart:如何更改条形图轴上每个标签的颜色?

    我有一个条形图 它在 Y 轴上显示不同的类别 我可以使用以下方法同时更改轴上所有颜色的颜色 chart ChartAreas MyChart AxisY LabelStyle ForeColor Red 但是它不允许我为每个设置颜色 任何帮
  • 将 URL 转换为绝对路径

    有没有简单的方法可以将包含两字节字符的 URL 转换为绝对路径 我问的原因是我正在尝试寻找这样的资源 URL url getClass getResources getresources test txt String path url t
  • 从目录获取文件时排除某些文件扩展名

    How to exclude从目录获取文件时的某些文件类型 I tried var files Directory GetFiles jobDir 不过这个功能好像只能选择你想要包含的文件类型 不能排除 你应该自己过滤这些文件 你可以这样写
  • 我应该按照什么顺序包含头文件?

    我是编程新手 在我开始使用大量头文件后 头文件的主题让我陷入了困境 除此之外 我正在尝试使用预编译头 我还使用 SFML 库 因此我还必须包含那些标头 现在我有 stdafx h main cpp 然后是 A h A cpp B h B c
  • libgdx - 如何在舞台中添加背景图像?

    我正在学习 libgdx 但我陷入了困境 我在舞台中添加了一个按钮 现在我想在舞台中添加一个图像 以便该图像看起来像按钮的背景图像 我的意思是说按钮应该位于图像上 我一直在寻找教程但无法做到这一点 如何做呢 有什么帮助吗 您唯一需要做的就是
  • Nodemon 不工作:[nodemon] 由于更改而重新启动

    I use nodemon questions tagged nodemon作为节点中的开发依赖项 突然 CLI 中显示 nodemon 由于更改而重新启动 当我更改代码时 然后我已经全局安装了nodemon 但它仍然无法工作 它不适用于任
  • 如何在不使用if的情况下编写Fibonacci Java程序[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 在 int Fibonacci in
  • IE 下的脚本 onload/onerror(用于延迟加载)问题

    我正在重建我的延迟加载模块以接受异步请求 但我有一个大问题 Internet Explorer 不支持 script onload onerror 旧脚本确实全局评估了使用 ajax 同步调用读取的目标脚本源 它工作得很好 它是跨浏览器的