精华内容
下载资源
问答
  • onload 加载完成时调用触发 原生: <img src="" alt="Park" onload=“handleImageLoaded()”/> JQuery: $("img").load(function(){ ...onerror 原生: <img src="" alt="Park" ...

    onload

    加载完成时调用触发

    原生:

    <img src="" alt="Park" onload=“handleImageLoaded()”/>

    JQuery:

    $("img").load(function(){
      /*doSomething*/
    });

    onerror

    原生:

    <img src="" alt="Park" onerror=“handleImageError()”/>

    JQuery:

    $("img").error(function(){
      /*doSomething*/
    });

     

    转载于:https://www.cnblogs.com/ljwTiey/p/7472532.html

    展开全文
  • 漫谈JSONP以及的onLoad和onError事件

    千次阅读 2018-02-04 15:05:15
    利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析 ...onError onLoad  属性,用于监听加载失败或者加载成功。 这意味着img实现请求成功或者失败的回调是OK的,但是接收不到server端的数据。

    利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析<script>标签的时候,会用script的src属性去发一个网络请求,并将response的东西当做javascript去执行。而浏览器对js脚本并没有做跨域限制。

    一个简单的jsonp例子

    const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=handleResponse'
    const scriptElement = document.createElement('script');
    scriptElement.src = url;
    document.body.appendChild(scriptElement)

    JSONP的核心在于下面几点:
    + 创建一个script标签,设置src为要调用的api并且看情况携带一些数据或者指定回调;
    + 将标签添加到html文档中;
    + 浏览器会自动根据src请求数据,并将response理解为Javascript执行。
    这里假象了一下如果后端是nodejs的话大概会怎么做:

    const callback = req.query.callback;
    const  data = ... // 
    const response = `${callback}(${JSON.stringify(data)})`

    关键点在于:
    后端的返回数据一定是可执行的JavaScript代码!!
    后端的返回数据一定是可执行的JavaScript代码!!
    后端的返回数据一定是可执行的JavaScript代码!!
    所以刚刚我在response那里实际上拼接了一个函数调用。
    那么回到浏览器这边,浏览器拿到CALLBACK_NAME(''some data")
    那么就开始执行这个函数了。那么同时就要求前端要实现约定的回调函数,并暴露到全局环境

    如果换做img标签来做这些事情

    同理解析等元素,同样没有对域做安全限制。所以理论上只要能发出跨域的网络请求,都能用来实现跨域。
    而大家总会使用script标签来做跨域无非是因为script标签能发出请求,并且能放一些代码放在回应里面,达到回调的效果

    所以理论上来说,如果考虑回调,需要使用script,使用jsonp技术。那么如果只是单纯地想跨域发一个request,那么选择script或者img等元素也无关紧要了。

    img其实也能做一些事情

    img元素能添加onError onLoad 属性,用于监听加载失败或者加载成功。
    这意味着img实现请求成功或者失败的回调是OK的,但是接收不到server端的数据。

    展开全文
  • 资源加载:onloadonerror浏览器允许我们跟踪外部资源的加载 —— 脚本,iframe,图片等。这里有两个事件:onload —— 成功加载,onerror —— 出现 erro...


    资源加载:onload,onerror

    浏览器允许我们跟踪外部资源的加载 —— 脚本,iframe,图片等。

    这里有两个事件:

    • onload —— 成功加载,

    • onerror —— 出现 error。

    加载脚本

    假设我们需要加载第三方脚本,并调用其中的函数。

    我们可以像这样动态加载它:

    let script = document.createElement('script');
    script.src = "my.js";
    
    document.head.append(script);
    

    ……但如何运行在该脚本中声明的函数?我们需要等到该脚本加载完成,之后才能调用它。

    对于我们自己的脚本,可以使用 JavaScript module,但是它们并未被广泛应用于第三方库。

    script.onload

    我们的得力助手是 load 事件。它会在脚本加载并执行完成时触发。

    例如:

    let script = document.createElement('script');
    
    // 可以从任意域(domain),加载任意脚本
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"
    document.head.append(script);
    
    script.onload = function() {
      // 该脚本创建了一个变量 "_"
      alert( _.VERSION ); // 显示库的版本
    };
    

    因此,在 onload 中我们可以使用脚本中的变量,运行函数等。

    ……如果加载失败怎么办?例如,这里没有这样的脚本(error 404)或者服务器宕机(不可用)。

    script.onerror

    发生在脚本加载期间的 error 会被 error 事件跟踪到。

    例如,我们请求一个不存在的脚本:

    let script = document.createElement('script');
    script.src = "https://example.com/404.js"; // 没有这个脚本
    document.head.append(script);
    
    script.onerror = function() {
      alert("Error loading " + this.src); // Error loading https://example.com/404.js
    };
    

    请注意,在这里我们无法获取更多 HTTP error 的详细信息。我们不知道 error 是 404 还是 500 或者其他情况。只知道是加载失败了。

    注意:onload/onerror 事件仅跟踪加载本身

    在脚本处理和执行期间可能发生的 error 超出了这些事件跟踪的范围。也就是说:如果脚本成功加载,则即使脚本中有编程 error,也会触发 onload 事件。如果要跟踪脚本 error,可以使用 window.onerror 全局处理程序。

    其他资源

    loaderror 事件也适用于其他资源,基本上(basically)适用于具有外部 src 的任何资源。

    例如:

    let img = document.createElement('img');
    img.src = "https://js.cx/clipart/train.gif"; // (*)
    
    img.onload = function() {
      alert(`Image loaded, size ${img.width}x${img.height}`);
    };
    
    img.onerror = function() {
      alert("Error occurred while loading image");
    };
    

    但是有一些注意事项:

    • 大多数资源在被添加到文档中后,便开始加载。但是 <img> 是个例外。它要等到获得 src (*) 后才开始加载。

    • 对于 <iframe> 来说,iframe 加载完成时会触发 iframe.onload 事件,无论是成功加载还是出现 error。

    这是出于历史原因。

    跨源策略

    这里有一条规则:来自一个网站的脚本无法访问其他网站的内容。例如,位于 https://facebook.com 的脚本无法读取位于 https://gmail.com 的用户邮箱。

    或者,更确切地说,一个源(域/端口/协议三者)无法获取另一个源(origin)的内容。因此,即使我们有一个子域,或者仅仅是另一个端口,这都是不同的源,彼此无法相互访问。

    这个规则还影响其他域的资源。

    如果我们使用的是来自其他域的脚本,并且该脚本中存在 error,那么我们无法获取 error 的详细信息。

    例如,让我们使用一个脚本 error.js,该脚本只包含一个(错误)函数调用:

    // ???? error.js
    noSuchFunction();
    

    现在从它所在的同一个网站加载它:

    <script>
    window.onerror = function(message, url, line, col, errorObj) {
      alert(`${message}\n${url}, ${line}:${col}`);
    };
    </script>
    <script src="/article/onload-onerror/crossorigin/error.js"></script>
    

    我们可以看到一个很好的 error 报告,就像这样:

    Uncaught ReferenceError: noSuchFunction is not defined
    https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1
    

    现在,让我们从另一个域中加载相同的脚本:

    <script>
    window.onerror = function(message, url, line, col, errorObj) {
      alert(`${message}\n${url}, ${line}:${col}`);
    };
    </script>
    <script src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
    

    此报告与上面那个示例中的不同,就像这样:

    Script error.
    , 0:0
    

    error 的详细信息可能因浏览器而异,但是原理是相同的:有关脚本内部的任何信息(包括 error 堆栈跟踪)都被隐藏了。正是因为它来自于另一个域。

    为什么我们需要 error 的详细信息?

    因为有很多服务(我们也可以构建自己的服务)使用 window.onerror 监听全局 error,保存 error 并提供访问和分析 error 的接口。这很好,因为我们可以看到由用户触发的实际中的 error。但是,如果一个脚本来自于另一个源(origin),那么正如我们刚刚看到的那样,其中没有太多有关 error 的信息。

    对其他类型的资源也执行类似的跨源策略(CORS)。

    要允许跨源访问,<script> 标签需要具有 crossorigin 特性(attribute),并且远程服务器必须提供特殊的 header。

    这里有三个级别的跨源访问:

    1. crossorigin 特性 —— 禁止访问。

    2. crossorigin="anonymous" —— 如果服务器的响应带有包含 * 或我们的源(origin)的 header Access-Control-Allow-Origin,则允许访问。浏览器不会将授权信息和 cookie 发送到远程服务器。

    3. crossorigin="use-credentials" —— 如果服务器发送回带有我们的源的 header Access-Control-Allow-OriginAccess-Control-Allow-Credentials: true,则允许访问。浏览器会将授权信息和 cookie 发送到远程服务器。

    你可以在 Fetch:跨源请求 一章中了解有关跨源访问的更多信息。这一章描述了用于网络请求的 fetch 方法,但策略是完全相同的。

    诸如 "cookie" 之类的内容超出了本章的范围,但你可以在 Cookie,document.cookie 一章学习它们。

    在我们的示例中没有任何跨源特性(attribute)。因此,跨源访问被禁止。让我们来添加它吧。

    我们可以在 "anonymous"(不会发送 cookie,需要一个服务器端的 header)和 "use-credentials"(会发送 cookie,需要两个服务器端的 header)之间进行选择。

    如果我们不关心 cookie,那么可以选择 "anonymous"

    <script>
    window.onerror = function(message, url, line, col, errorObj) {
      alert(`${message}\n${url}, ${line}:${col}`);
    };
    </script>
    <script *!*crossorigin="anonymous"*/!* src="https://cors.javascript.info/article/onload-onerror/crossorigin/error.js"></script>
    

    现在,假设服务器提供了 Access-Control-Allow-Origin header,一切都正常。我们有了完整的 error 报告。

    总结

    图片 <img>,外部样式,脚本和其他资源都提供了 loaderror 事件以跟踪它们的加载:

    • load 在成功加载时被触发。

    • error 在加载失败时被触发。

    唯一的例外是 <iframe>:出于历史原因,不管加载成功还是失败,即使页面没有被找到,它都会触发 load 事件。

    readystatechange 事件也适用于资源,但很少被使用,因为 load/error 事件更简单。

    作业题

    先自己做题目再看答案。

    使用回调函数加载图片

    重要程度:⭐️⭐️⭐️⭐️

    通常,图片在被创建时才会被加载。所以,当我们向页面中添加 <img> 时,用户不会立即看到图片。浏览器首先需要加载它。

    为了立即显示一张图片,我们可以“提前”创建它,像这样:

    let img = document.createElement('img');
    img.src = 'my.jpg';
    

    浏览器开始加载图片,并将其保存到缓存中。以后,当相同图片出现在文档中时(无论怎样),它都会立即显示。

    创建一个函数 preloadImages(sources, callback),来加载来自数组 source 的所有图片,并在准备就绪时运行 callback

    例如,这段代码将在图片加载完成后显示一个 alert

    function loaded() {
      alert("Images loaded")
    }
    
    preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
    

    如果出现错误,函数应该仍假定图片已经“加载完成”。

    换句话说,当所有图片都已加载完成,或出现错误输出时,将执行 callback

    例如,当我们计划显示一个包含很多图片的可滚动图册,并希望确保所有图片都已加载完成时,这个函数很有用。

    在源文档中,你可以找到指向测试图片的链接,以及检查它们是否已加载完成的代码。它应该输出 300

    答案:

    1. 为每个资源创建 img

    2. 为每个图片添加 onload/onerror

    3. onloadonerror 被触发时,增加计数器。

    4. 当计数器值等于资源值时 —— 我们完成了:callback()

    function preloadImages(sources, callback) {
      let counter = 0;
    
      function onLoad() {
        counter++;
        if (counter == sources.length) callback();
      }
    
      for(let source of sources) {
        let img = document.createElement('img');
        img.onload = img.onerror = onLoad;
        img.src = source;
      }
    }
    

    现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程。

    在线免费阅读:https://zh.javascript.info



    最后

    • 欢迎加我微信(winty230),拉你进技术群,长期交流学习...

    • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

    点个在看支持我吧

    展开全文
  • onload,onreadystate,onerror

    2019-10-04 17:01:43
    JSONP IE:onreadystatechange, ff:onload|onerror AJAX: onreadystatechange ...IE:onload|onreadystatechange 捕捉错误没有onerror, FF:onload|onerror低版本可能没定义 转载于:https://www.cn...

    JSONP

    IE:onreadystatechange, ff:onload|onerror

    AJAX:

    onreadystatechange

    IMG:

    onload|onerror

    CSS

    IE:onload|onreadystatechange 捕捉错误没有onerror, FF:onload|onerror低版本可能没定义

     

    转载于:https://www.cnblogs.com/fredwu/archive/2012/09/16/2687987.html

    展开全文
  • html异步加载文本以及onloadonerror的触发最近项目开发中,需要一些异步加载文件的操作,简单的可以通过XMLHttpRequest对象来获取,但其中还涉及一些跨域的文件访问,因此设想使用src属性的跨域能力来加载文件,...
  • 之前学习了requireJS框架,最近在学习seaJS框架,两者都是js模块文件的...onerror:当加载js文件报错的时候会被调用,比如文件路径错误、网络不可用等情况。onreadystatechange:则是IE特有的,不同的版本支持情况还不
  • function f(){ var img = document.createElement("img"); // fox 用 img.src = "1.gif"; img.onload = function(){alert(s);img.parentNode.removeChild(img);}; // ie 用 img.src = "wrong";
  • onError:当图片加载出现错误,会触发 经常在这里事件里头写入 将图片导向默认报错图片,以免页面上出现红色的叉叉 onLoad:事件是当图片加载完成之后触发 onAbort:图片加载的时候,用户通过点击停止加载(浏览器...
  • 与加载有关的事件有2个,onerror和onload 1.使用onerror解决img加载失败的问题 先看一看官网对该事件的介绍 onerror 事件会在文档或图像加载过程中发生错误时被触发。 支持该事件的 HTML 标签: , ...
  • 本来是一个简单的img onload=javascript:this.src= onerror= 的过程, 但是遇到几个问题:1、FF的onerror怎么也触发不了,后来查看源码发现,src=""为空时,FF不认为image载入失败,郁闷。 2、onload死活就是调用...
  • HTML img标签之onAbort、onErroronLoad事件与问题
  • 我们都知道,img标签支持onerror事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。 <img src="images/img.png" onerror="notimgfound();...
  • 1、error事件(img标签加载失败的方法) < img src=“123” :οnerrοr=“defaultImg()” /> function defaultImg(){ //地址错误时,直接删除img标签 this.remove() } 或者 ... img.onerror
  • IE11错误:Exception in window.onload: An error has occuredJSPlugin.3005 解决方案 问题:新安装的IE11无法使用F12开发者工具,DOC资源管理器提示错误“Exception in window.onload: An error has ...
  • window.onerror

    2009-07-21 18:05:00
    window.onerror window.onload()对应,当window.onload()加载失败的时候执行window.onerror()
  • 触发onerror事件处理异常

    千次阅读 2017-04-12 10:35:37
    触发onerror事件是最早用于处理JavaScript异常的机制,页面出现异常时,将触发onerror事件,该事件在window对象上触发。 语法: window.onerror=function() { alert("您调用的函数不存在");  return true; ...
  • IE11错误:Exception in window.onload: An error has occuredJSPlugin.3005 解决方案 问题:新安装的IE11无法使用F12开发者工具,DOC资源管理器提示错误“Exception in window.onload: An error has ...
  • HTML资源标签onerror属性

    千次阅读 2018-04-12 21:47:52
    测试代码: <!... ...3、标签同理,利用this对象可以把该标签中的onerror函数改为 onerror="javascript:this.src='./backup.img'" ,这样资源图片找不到时就有了备份图片。 测试环境:Chrome浏览器
  • 关于script标签的onerror事件

    千次阅读 2012-10-01 01:56:25
    其实写过jsonp相关api或者了解jsonp原理的同学其实都知道其实作为跨域的一...其实当然很多人也了解过script标签部分支持onerror事件 兼容性相关: IE9|10 FF Safari Chrome 支持 IE6-8 Opera 不支持 ...
  • onerror 事件

    千次阅读 2013-06-25 19:26:18
    onerror alert hack   qvod onerror   结果中找   帮助   反馈意见   举报   高级搜索 ©2013 Baidu  此内容系百度根据您的指令自动搜索的结果,不代表百度赞成被搜索网站的...
  • 有关window.onerror事件的监听及用法

    千次阅读 2011-06-20 14:05:00
    用法window.onerror相比window.onload来说确实不太常用,但它可以帮助监控web页面js错误,方便统一收集管理。监听这个事件与监听其他事件略有不同,通常监听onload事件:window.onload = function(e) {...}; 回调...
  • 使用img的onerror事件,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png。 解决方法一、图片路径错误使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 41,508
精华内容 16,603
关键字:

onload和onerror