<img src=# onerror=a=createElement('script');body

Posted 2023-04-22

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了<img src=# onerror=a=createElement('script');body相关的知识，希望对你有一定的参考价值。

<img src=# onerror=a=createElement('script');body.appendChild(a);a.src=//;>
解释下意思

首先要说的是这段代码写得不是很规范，简单修改一下应该是下面这样

首先，onerror是一个事件，即在加载图片发生错误时运行里面的 js代码

第一句：

a = createElememt('script');

创建了一个<script>元素

第二句

body.appendChild(a);

这句话的意思很简单，就是把刚刚创建的这个<script>元素附加到 <body>元素上去

第三句

a.src='//'

我们都知道，<script>元素有一个属性是 src ，所以这句话的意思就是指定<script>要引入的文件路径

综上，上面这段代码的完整用意就是：在图片加载发生错误时，向页面添加一个<script>代码，并用段代码引入另一个javascript文件。换言之，当图片加载失败，运行指定的js文件。

追问

不附加到body元素可以吗

直接a.src

追答

可以先a.src 再附加到body元素上，或者其它任何已经在页面中存在的元素上都可以，但是一定要附加到某个元素。否则浏览器不知道该在什么地方运行这段代码

追问

谢谢，明白了

参考技术A img 的图加载失败就换另一个图显示
图就是src里的参考技术B onerror是指，在img加载失败时会调用其中的方法参考技术C 图片加载错误，就将a加到Body中

JavaScript img.src onerror 事件 - 获取错误原因

【中文标题】JavaScript img.src onerror 事件 - 获取错误原因【英文标题】：JavaScript img.src onerror event - get reason of error 【发布时间】：2017-03-27 03:27:19 【问题描述】：

<img> 加载错误可能有不同的原因，例如网络错误响应、错误的图像数据...

从onerror 收到的error 对象似乎没有说明确切的原因。

有没有办法知道错误是因为网络错误，比如HTTP 500 还是网络超时？

编辑： 我不是寻找加载资源的替代方法，例如 AJAX 请求。我需要一个专门针对带有onerror 事件的<img> 标签的答案。原因是我正在使用这种方法进行像素跟踪，并且我需要一种方法来重试网络错误。我也不在寻找替代的跟踪方法，例如 JSONP。

【问题讨论】：

可以看到这个问题：***.com/questions/9714525/javascript-image-url-verify/… 这不是在回答我的问题。我编辑了问题，使其更具体。我只是想给你一个建议，而不是答案，因为我认为无法从 onerror 事件中检索错误类型。 【参考方案1】：

编辑`16Nov16 2020GMT`

也许您是电子邮件中的 pixel-tracking 或其他限制 Javascript 功能的客户端。

想到的一个想法是在您的<img> 的src URL 中使用URL 查询参数。

关于网络超时，我会提出这样一个想法：用户打开一封电子邮件，完全加载电子邮件，然后断开与互联网的连接，不知何故这并没有给跟踪器足够的时间来加载。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

我建议在 onerror 函数中使用 setTimeout()。这将继续尝试设置/加载<img> 的src URL。您可以将成功加载所需的秒数附加到您的 src 文件的 URL 作为查询参数，例如 ?s=<sec>

至于确定图像加载上的状态500 代码，您可能需要考虑创建一个自定义的500 错误文件，然后该文件将创建——例如——一个 MySQL 数据库条目，其中包含你可以访问的各种信息如果您选择使用前面提到的查询参数，那么您会在错误中添加更多信息。

`onerror` for `<img>` 提供了有关网络的有限信息

<img> 提供的信息可在以下位置找到 https://www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

旧答案：

也许您想尝试的一种方法是使用 AJAX 加载图像数据并将<img> src 设置为接收到的图像数据的 base64。我希望这会有所帮助。

编辑`14Nov16 2018GMT`

或者使用 AJAX 来确定图像是否正确加载，然后然后使用发送到 AJAX 的相同 URL 作为 src 的 <img>。这当然是多余的，但可以避免长“数据”URL 的问题。

编辑`15Nov16 0832GMT`

关于网络超时，我发现这个线程很有用JQuery Ajax - How to Detect Network Connection error when making Ajax call 显然，您可以像使用 error 一样为 AJAX 指定 timeout，只是您只需手动提供毫秒数。

转换为 Base64

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa

  var encodedData = window.btoa("Hello, world"); // encode a string

或者，如果您对能够使用 btoa() 的旧版浏览器感到担忧，那么您可能会对 Google 的 https://chromium.googlesource.com/chromiumos/platform/spigots/+/refs/heads/firmware-u-boot-v1/base64_encode.js 感兴趣

jQuery 的 AJAX 中的状态码检查

jQuery: How to get the HTTP status code from within the $.ajax.error method?

$.ajax(
    type: 'GET',
    url: '/path-to-my/image.png',
    data: null,
    success: function(data)
        alert('horray! 200 status code!');
        // convert to base64; add to img.src # btoa(data)
        document.querySelector("#hlogo img").src = "data:;base64,"+ data;
    ,
    error:function (xhr, ajaxOptions, thrownError)
        switch (xhr.status) 
            case 400:
                 // Take action, referencing xhr.responseText as needed.

            case 404:
                 // Take action, referencing xhr.responseText as needed.

            case 500:
                 // Take action, referencing xhr.responseText as needed.
        
);

注意事项

https://www.rfc-editor.org/rfc/rfc2397#section-3

  dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
  mediatype  := [ type "/" subtype ] *( ";" parameter )
  data       := *urlchar
  parameter  := attribute "=" value

https://www.rfc-editor.org/rfc/rfc2046#section-4.2