DOMException

最新推荐文章于 2024-09-12 15:03:19 发布
转载 最新推荐文章于 2024-09-12 15:03:19 发布 · 9.6k 阅读 · 0

本文深入探讨了DOM操作中可能出现的异常类型及对应的错误代码，包括但不限于范围外索引、字符串大小限制、层级请求错误等常见问题。

http://www.w3.org/wiki/DOM/domcore/DOMException

DOM/domcore/DOMException

< DOM‎ | domcore

DOMException

DOM operations only raise exceptions in "exceptional" circumstances, i.e., when an operation is impossible to perform (either for logical reasons, because data is lost, or because the implementation has become unstable). In general, DOM methods return specific error values in ordinary processing situations, such as out-of-bound errors when using NodeList.

ExceptionCode

CodeConstantDescription
1INDEX_SIZE_ERRthe index is not in the allowed range
2DOMSTRING_SIZE_ERRthe text does not fit in a DOMString
3HIERARCHY_REQUEST_ERRthe operation would yield an incorrect nodes model
4WRONG_DOCUMENT_ERRthe object is in the wrong Document, a call to importNode is required
5INVALID_CHARACTER_ERRthe string contains invalid characters
6NO_DATA_ALLOWED_ERRdata is specified for an object that does not support it (historical)
7NO_MODIFICATION_ALLOWED_ERRthe object can not be modified
8NOT_FOUND_ERRthe object can not be found here
9NOT_SUPPORTED_ERRthis operation is not supported
10INUSE_ATTRIBUTE_ERRthe attribute is in use (historical)
11INVALID_STATE_ERRthe object is in an invalid state
12SYNTAX_ERRthe string did not match the expected pattern
13INVALID_MODIFICATION_ERRthe object can not be modified in this way
14NAMESPACE_ERRthe operation is not allowed by Namespaces in XML
15INVALID_ACCESS_ERRthe object does not support the operation or argument
16VALIDATION_ERRthe operation is invalid (historical)
17TYPE_MISMATCH_ERRthe type of the object does not match the expected type
18SECURITY_ERRthe operation is insecure
19NETWORK_ERRa network error occurred
20ABORT_ERRthe user aborted an operation
21URL_MISMATCH_ERRthe given URL does not match another URL
22QUOTA_EXCEEDED_ERRthe quota has been exceeded
23TIMEOUT_ERRa timeout occurred
24INVALID_NODE_TYPE_ERRthe supplied node is invalid or has an invalid ancestor for this operation
25DATA_CLONE_ERRthe object can not be cloned
QuotaExceededError the quota has been exceeded --- Firefox 报错解决
henryzyk的博客
01-08 4686
QuotaExceededError the quota has been exceeded — Firefox 报错解决
Uncaught DOMException:
04-24
标题“Uncaught DOMException:”通常出现在JavaScript编程中，指的是在执行代码时遇到了一个未捕获的DOM（Document Object Model）异常。这个错误通常意味着在访问或操作DOM元素时发生了问题，可能是由于尝试访问不...
QuotaExceededError The quota has been exceeded
JUSTIN的博客
08-28 4617
（一）前言 我首先描述下，这种报错出现的场景 ios <= 10 真机 Safari 的无痕浏览模式 使用localStorage or sessionStorage 的 setItem 当然，问题肯定社区有解决方案，以下链接可以满足你想要的答案 问题链接1 问题链接2 问题链接3 （二）解决过程 如果你看完，那么问题可以总结为，两个方向 是我们h5站点增加检测是否支持，并提示用户切换模式 我们在不支持情况，默认切到cookie 当然因为cookie本身储存空间不大，所以建议如果本地存储大量数
QuotaExceededError(DOM Exception 22)
weixin_43232488的博客
10-11 2008
ios报错信息:QuotaExceededError(DOM Exception 22): The quota has been exceeded. undefined: 10:16305 setItem@[native code] ios 隐私模式下 会限制 localstorage 和 sessionstorage 的使用 测试的时候最好看下当前浏览器所处的模式。代码里也要判断 当前是否隐私...
QuotaExceededError: The quota has been exceeded. localStorage缓存超出限制
weixin_30548917的博客
12-24 4280
今天在项目中遇到了一个问题，localStorage存储超出限制。报错信息如标题。这个是因为最近做了一波优化，把导航栏和一些用户信息本地化存储，都放在localStorage里，也不是每个用户会出现这种问题。 其实同一个域名下可能存在几十上百条业务线，每条业务线都可能因为各种理由往 localStorage 里塞东西，跨页面传数据啦、缓存啦、离线化啦、性能优化啦...，5M 看起来很多，其实很快...
W3C DOM异常对象DOMException介绍
weixin_33749242的博客
04-05 3561
2019独角兽企业重金招聘Python工程师标准>>> ...
精选资源
DOMException: play() failed because the user didn‘t interact wit
02-02
DOMException: play() failed because the user didn‘t interact with the document first.
DOM Exception error
weixin_30256901的博客
01-26 468
INDEX_SIZE_ERR code 1 索引是负值，或者超过了索引值 DOMSTRING_SIZE_ERR code 2 DOMstring 的特定字符数据太大 HIERARCHY_REQUEST_ERR code 3 字节不允许有子节点，或者新节点...
使用dwz-ria Jquery ui框架出现“HierarchyRequestError: Node cannot be inserted at the specified point in th
black_wizard的专栏
12-01 1084
使用 dwz-ria 做演示的后台，需要用 $.ajax 返回script和html代码 在IE上使用正常， 在火狐下报错，用firebug 发现如下错误， 参考：http://blog.sina.com.cn/s/blog_995c1f630101a36l.html 用firebug开始调试定位错误位置： 在jquery.ajax中有一个属性dataType，需要指定dataT
Uncaught (in promise) DOMException谷歌浏览器js报错分析
weixin_43254676的博客
05-27 3005
https://www.inqingdao.cn/5988.html
若依防止表单重复提交报错
qq_50048558的博客
03-20 2057
问题描述：前端request.js中 防止表单重复提交方法 当提交data大于5M时。2.大数据内容防止重复提交在后端处理，不在前端处理。3.前端单独配置请求repeatSubmit属性。1.最直接的办法====>干掉表单重复提交验证。
React开发者的噩梦：“启动Google翻译后，我的应用频频崩溃！”
优快云资讯
09-12 1316
随着互联网的全球化进程不断推进，多语言支持成为了现代 Web 应用不可或缺的一部分。然而，在实际应用中，诸如 Google 翻译这样的机器翻译工具却带来了意想不到的问题。特别是对于基于 React 框架构建的应用程序而言，Google 翻译的实时翻译功能常常会导致 DOM 结构的变化，进而引发一系列崩溃和其他不可预见的问题。本文旨在全面剖析这一现象，揭示 Google 翻译与 React 应用之间...
js里面出现找不到对象的两种原因
Crystal_Sky75的专栏
06-17 1206
[color=green][size=medium][b]找不到对象的原因[/b][/size]：[/color] 一种没有那个html元素 另外一种是虽然有那个元素，但是调用的JS的时候document没加载完你就掉那个元素的话也得不到对象的....
服务器项目前端调用摄像头失败,浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed...
weixin_39634194的博客
08-11 5982
通过浏览器调用摄像头失败：NotSupportedError Only secure origins are allowed错误报告NotSupportedError Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).[Deprecation] getUserMedia() no longer works on insecur...
could not be added to the element "hashTree" because: The Node already has an existing parent of “”
主要写大数据集群一线运维和学习工作经验
08-02 2563
 大概意思是这样：不能添加该节点到其他节点下面，因为该节点已经存在父节点！！！ 解决方法：     将有父节点的Element执行以下操作即可去掉该报错。     clone()，翻译过来时克隆的意思，就是将该元素复制一个一模一样的出来，然后再强制类型转换成Element使用即可。               element.add((Element) bookStore1.clone()); ...
How a web page loads
weixin_33690963的博客
06-24 343
The major web browsers load web pages in basically the same way. This process is known as parsing and is described by the HTML5 specification. A high-level understanding of this process is critical to...
Windows 10 周年更新后的 Edge 14 的 HierarchyRequestError 报错
weixin_34161032的博客
08-04 687
在升级到 Windows 10 周年更新后，使用系统自带的 Edge 浏览器浏览部分网站出现这种报错： 在网络上搜索 HierarchyRequestError 会找到同样的案例，大致都指向使用 appendChild 时报错，因此初步判定此报错是和节点操作相关。 翻看网络上的案例，发现大多是 appendChild 使用方法错误，而 E...
DOMException:
最新发布
07-30
DOMException 错误是浏览器在执行 DOM 操作时发生的异常，通常表示在调用 Web API 或操作 DOM 元素时出现不合法或不可行的操作。该错误是 W3C DOM 规范中定义的标准异常类型，常出现在前端开发中，尤其是在与 DOM、Canvas、Web Storage、XMLHttpRequest、Fetch API 等交互时。 --- ### 常见原因 1. **非法的 DOM 操作** 例如尝试访问或操作不存在的 DOM 元素、在不支持的上下文中调用 DOM 方法等。 举例：获取一个尚未加载完成的元素并调用其方法。 2. **跨域资源访问问题** 当脚本尝试访问不同源的资源（如图片、iframe、Canvas 的图像数据）时，会触发 `SecurityError` 类型的 DOMException。 3. **Web Storage 访问限制** 在隐私模式或浏览器禁用本地存储的情况下访问 `localStorage` 或 `sessionStorage`，会抛出 `QuotaExceededError` 或 `SecurityError`。 4. **Canvas 图像数据访问失败** 使用 `getImageData` 方法时，如果 Canvas 已被污染（例如绘制了跨域图片而未设置 CORS），将抛出 `SecurityError`。 5. **无效的参数或状态** 例如传递非法参数给 DOM 方法，或在错误的状态下调用 API（如未正确初始化对象）。 --- ### 解决方案 1. **确保 DOM 完全加载后再操作** 使用 `DOMContentLoaded` 事件或 `window.onload` 来确保页面结构完整后再执行脚本。 ```javascript document.addEventListener('DOMContentLoaded', function () { // DOM 已加载，可以安全操作 }); ``` 2. **处理跨域资源时启用 CORS** 如果使用 Canvas 绘制外部图片，需确保图片服务器允许跨域访问，并在创建图片对象时设置 `crossOrigin` 属性： ```javascript const img = new Image(); img.crossOrigin = 'Anonymous'; img.src = 'https://example.com/image.png'; img.onload = () => { ctx.drawImage(img, 0, 0); }; ``` 3. **检查 Web Storage 的可用性** 在访问 `localStorage` 或 `sessionStorage` 前进行可用性检测： ```javascript function isStorageAvailable(type) { try { const storage = window[type]; const x = '__storage_test__'; storage.setItem(x, x); storage.removeItem(x); return true; } catch (e) { return false; } } if (isStorageAvailable('localStorage')) { // 可以安全使用 localStorage } ``` 4. **使用本地服务器开发避免文件协议限制** 在本地开发中直接使用 `file://` 协议可能导致权限问题，建议使用本地服务器（如 VS Code 的 Live Server 插件）来运行 HTML 文件，以避免触发 `DOMException`。 5. **异常捕获与日志记录** 使用 `try...catch` 结构捕获可能的 DOMException，并记录错误信息以便调试： ```javascript try { const data = ctx.getImageData(0, 0, canvas.width, canvas.height); } catch (e) { if (e instanceof DOMException) { console.error('Canvas 图像数据访问失败:', e.message); } else { console.error('未知错误:', e); } } ``` --- ### 最佳实践 - 在开发过程中使用现代浏览器的开发者工具（如 Chrome DevTools）监控控制台输出，及时发现异常。 - 针对动态内容加载或爬虫场景，确保使用支持 JavaScript 渲染的工具（如 Puppeteer、Selenium）来获取完整的 DOM 结构。 - 对于涉及安全限制的操作（如图像数据读取、存储访问），始终考虑浏览器的安全策略并提前处理异常情况。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值