Javascript INVALID_STATE_ERR：DOM 异常 11 (WebKit)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3488698/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
INVALID_STATE_ERR: DOM Exception 11 (WebKit)
提问by Regis Frey
I recently tested a Cappuccino app I was working on with Chrome and Safari. I get the error:
我最近在 Chrome 和 Safari 上测试了一个 Cappuccino 应用程序。我收到错误：
INVALID_STATE_ERR: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.
The lack of information is frustrating. What object and where did I attempt to use it? Chrome tries to answer the second question but the line number it gives, 465, doesn't mean anything when the file it gives is just 94 lines long. Without more information I don't even know where to start looking.
缺乏信息令人沮丧。我尝试使用什么对象以及在哪里使用它？Chrome 尝试回答第二个问题，但是当它给出的文件只有 94 行长时，它给出的行号 465 没有任何意义。没有更多信息，我什至不知道从哪里开始寻找。
采纳答案by Jamie Pate
Chrome canary offers stack traces for DOM Exceptions!
Chrome canary 为 DOM 异常提供堆栈跟踪！
回答by Dave Lampert
Usually this error occurs with the XMLHttpRequest when you call the open method with async = true, or you leave the async parameter undefined so it defaults to asynchronous, and then you access the status or responseText properties. Those properties are only available after you do a synchronous call, or on the readyState becoming ready (once the asynchronous call responds). I suggest you first try with async = false, and then switch to it being true and use the onReadyStateChange.
通常，当您使用 async = true 调用 open 方法时，XMLHttpRequest 会发生此错误，或者您未定义 async 参数以使其默认为异步，然后您访问 status 或 responseText 属性。这些属性仅在您执行同步调用后或在 readyState 准备就绪（异步调用响应后）时才可用。我建议您首先尝试使用 async = false，然后切换为 true 并使用 onReadyStateChange。
回答by Jeff Widmer
In my case I was setting the headers prior to opening the connection. To prevent this error the headers need to be set after opening the connection:
就我而言，我在打开连接之前设置了标题。为防止此错误，需要在打开连接后设置标头：
var fd = new FormData();
fd.append("fileToUpload", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", postUrl, true);
xhr.setRequestHeader("cache-control", "no-cache");
xhr.send(fd);
I understand this answer is specific to my problem and not the generic INVALID_STATE_ERR: DOM Exception 11 message but figured I would post my solution here for the next person.
我知道这个答案特定于我的问题，而不是通用的 INVALID_STATE_ERR: DOM Exception 11 消息，但我想我会在这里为下一个人发布我的解决方案。
回答by Brian DeRocher
This can also happen when Javascript tries to document.write()into an XHTML page (Content-Type: application/xhtml+xml).
当 Javascript 尝试document.write()进入 XHTML 页面 ( Content-Type: application/xhtml+xml)时，也会发生这种情况。
回答by pieroxy
This error is also thrown when attempting to modify the valueproperty of a <input type="file"
尝试修改 a 的value属性时也会抛出此错误<input type="file"
This is a security check.
这是安全检查。
回答by petteri
First, I don't really know a thing of Cappucino or what you're trying to do. But I've seen this when working with Qt WebKit and JavaScript objects. It happened after javascript window object was cleared, e.g. if I didn't load my native JS objects to WebKit after new page was loaded.
首先，我真的不知道卡布奇诺咖啡或者你想要做什么。但是我在使用 Qt WebKit 和 JavaScript 对象时已经看到了这一点。它发生在 javascript 窗口对象被清除之后，例如，如果我在加载新页面后没有将我的原生 JS 对象加载到 WebKit。
This basically means, you are trying to use internally deleted JavaScript object.
这基本上意味着，您正在尝试使用内部删除的 JavaScript 对象。
回答by Regis Frey
In this case I believe the issue was stemming from trying to draw images to canvas using a pattern fill with an image that was not fully loaded. This question was related to Cappuccino issue 811and my reasoning is based on aparajita'sadvice to make sure the image is loaded before attempting to use it as a pattern fill.
在这种情况下，我认为问题源于尝试使用未完全加载的图像填充图案将图像绘制到画布上。这个问题与卡布奇诺问题 811相关，我的推理基于aparajita 的建议，以确保在尝试将其用作图案填充之前已加载图像。
Still, this error is frustratingly opaque considering the key piece of information (what object was called) is not obvious and the places it can crop up in are varied.
尽管如此，考虑到关键信息（对象被称为什么）并不明显，并且它可能出现的位置各不相同，这个错误仍然令人沮丧地不透明。
回答by Alexander Ljungberg
Both Chrome and Safari have built in debuggers. Make sure you use the index-debug.html file to launch your application to get easy to read code.
Chrome 和 Safari 都内置了调试器。确保您使用 index-debug.html 文件来启动您的应用程序，以便于阅读代码。
In Safari, go to Preferences and activate the Developer menu. Then go to Develop > Start Debugging JavaScript. Use the pause icon in the lower left to set the debugger to pause on errors. The next time you hit the problem the debugger will pause at the offending line and show you how it got there through the stack trace.
在 Safari 中，转到首选项并激活开发人员菜单。然后转到“开发”>“开始调试 JavaScript”。使用左下角的暂停图标将调试器设置为在出现错误时暂停。下次您遇到问题时，调试器将在有问题的行处暂停，并向您展示它是如何通过堆栈跟踪到达那里的。
回答by Micah
I've seen this happen when trying to dynamically write an input[type="file"]element with its valueattribute set.
我在尝试动态编写input[type="file"]具有其value属性集的元素时看到了这种情况。
When i removed the valueattr from what i was injecting it all worked.
当我value从我注射的东西中删除attr 时，一切都奏效了。
In a sense, I see this error as meaning "you tried to do something that specification does not allow" based upon this article here -- http://designbyjeeba.blogspot.com/2011/04/dreaded-invalidstateerr-dom-exception.html
从某种意义上说，我认为这个错误意味着“你试图做一些规范不允许的事情”基于这篇文章——http: //designbyjeeba.blogspot.com/2011/04/dreaded-invalidstateerr-dom-exception .html
回答by maracuja-juice
This problem occured for me because I used the Audio API like this:
这个问题发生在我身上，因为我使用了这样的音频 API：
let someAudio = new Audio(file);
someAudio.play();
someAudio.pause();
But this is not correct because the play() function is async. Instead you need to use the then function of the returned Promise.
但这不正确，因为 play() 函数是异步的。相反，您需要使用返回的 Promise 的 then 函数。
someAudio.play().then(() => someAudio.pause());
Return value:A Promise which is fulfilled when playback has been started, or is rejected if for any reason playback cannot be started. MDN
返回值：一个在播放开始时完成的承诺，或者如果由于任何原因播放无法开始则被拒绝。 MDN
