1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: GlobalEventHandlers.onerror
slug: Web/API/GlobalEventHandlers/onerror
tags:
- API
- Property
- Reference
translation_of: Web/API/GlobalEventHandlers/onerror
---
<div>{{ApiRef("HTML DOM")}}</div>
<div>混合事件 {{domxref("GlobalEventHandlers")}} 的 onerror 属性是用于处理 {{event("error")}} 的事件</div>
<div></div>
<p><code><a href="/en-US/docs/Web/Events/error">Error</a></code>事件的<a href="/zh-CN/docs/Web/Guide/Events/Event_handlers">事件处理程序</a>，在各种目标对象的不同类型错误被触发：</p>
<ul>
<li>当<strong>JavaScript运行时错误</strong>（包括语法错误）发生时，{{domxref("window")}}会触发一个{{domxref("ErrorEvent")}}接口的<code><a href="/en-US/docs/Web/Events/error">error</a></code>事件，并执行<code>window.onerror()</code>。</li>
<li>当一项资源（如{{HTMLElement("img")}}或{{HTMLElement("script")}}）<strong>加载失败</strong>，加载资源的元素会触发一个{{domxref("Event")}}接口的<code><a href="/en-US/docs/Web/Events/error">error</a></code>事件，并执行该元素上的<code>onerror()</code>处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的{{domxref("window.addEventListener")}}捕获。</li>
</ul>
<p>加载一个全局的<code>error</code>事件处理函数可用于自动收集错误报告。</p>
<h2 id="语法">语法</h2>
<p>由于历史原因，<code>window.onerror</code>和<code>element.onerror</code>接受不同的参数。</p>
<h3 id="window.onerror">window.onerror</h3>
<pre class="brush: js">window.onerror = function(message, source, lineno, colno, error) { ... }
</pre>
<p>函数参数：</p>
<ul>
<li><code>message</code>：错误信息（字符串）。可用于HTML <code>onerror=""</code>处理程序中的<code>event</code>。</li>
<li><code>source</code>：发生错误的脚本URL（字符串）</li>
<li><code>lineno</code>：发生错误的行号（数字）</li>
<li><code>colno</code>：发生错误的列号（数字）{{gecko_minversion_inline("31.0")}}</li>
<li><code>error</code>：<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error对象</a>（对象）{{gecko_minversion_inline("31.0")}}</li>
</ul>
<p>若该函数返回<code>true</code>，则阻止执行默认事件处理函数。</p>
<h3 id="window.addEventListenererror">window.addEventListener('error')</h3>
<pre><code>window.addEventListener('error', function(event) { ... })</code>
</pre>
<p>{{domxref("ErrorEvent")}} 类型的<code>event</code>包含有关事件和错误的所有信息。</p>
<h3 id="element.onerror">element.onerror</h3>
<pre class="brush: js">element.onerror = function(event) { ... }
</pre>
<p><code>element.onerror</code>使用单一{{domxref("Event")}}参数的函数作为其处理函数。</p>
<h2 id="注意事项">注意事项</h2>
<p>当加载自<a href="/en-US/docs/Web/Security/Same-origin_policy">不同域</a>的脚本中发生语法错误时，为避免信息泄露（参见{{bug("363897")}}），语法错误的细节将不会报告，而代之简单的<code><strong>"Script error."</strong></code>。在某些浏览器中，通过在{{HTMLElement("script")}}使用<code>{{htmlattrxref("crossorigin","script")}}</code>属性并要求服务器发送适当的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP 响应头，该行为可被覆盖。一个变通方案是单独处理"Script error."，告知错误详情仅能通过浏览器控制台查看，无法通过JavaScript访问。</p>
<pre class="brush: js">window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
return false;
};</pre>
<p>当使用行内HTML标签（<code><body onerror="alert('an error occurred')"></code>）时，HTML规范要求传递给<code>onerror</code>的参数命名为<code>event</code>、<code>source</code>、<code>lineno</code>、<code>colno</code>、<code>error</code>。针对不满足此要求的浏览器，传递的参数仍可使用<code>arguments[0]</code>到<code>arguments[2]</code>来获取。</p>
<h2 id="规范">规范</h2>
<table class="spectable standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>在Firefox 14之前，当{{HTMLElement("script")}}加载失败时，<code>window.onerror</code>被传入<strong>"Error loading script"</strong>信息。该bug已在{{bug("737087")}}修复，取而代之，在这种情况下，<code>scriptElement.onerror</code>将被触发。</p>
<p>自Firefox 31始加入最后两个参数（<code>colno</code> and <code>error</code>），意味着通过提供的<code>Error</code>对象，你可以从<code>window.onerror</code>访问脚本错误的stack trace（{{bug("355430")}}。）</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li>
<li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li>
</ul>
|
