INVALID_STATE_ERR: DOM Exception 11 (WebKit)

问题:

I recently tested a Cappuccino app I was working on with Chrome and Safari. I get the error:

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.

回答1:

Chrome canary offers stack traces for DOM Exceptions!

回答2:

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.

回答3:

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.

回答4:

This can also happen when Javascript tries to document.write() into an XHTML page (Content-Type: application/xhtml+xml).

回答5:

This error is also thrown when attempting to modify the value property of a <input type="file"

This is a security check.

回答6:

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.

This basically means, you are trying to use internally deleted JavaScript object.

回答7:

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 811 and my reasoning is based on aparajita's advice to make sure the image is loaded before attempting to use it as a pattern fill.

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.

回答8:

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.

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.

回答9:

I've seen this happen when trying to dynamically write an input[type="file"] element with its value attribute set.

When i removed the value attr from what i was injecting it all worked.

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

回答10:

I would like to add to this. Got this bug on a Samsung S4 and S5 using the stock browser.

On my side it was caused by trying to play an audio file that hasn't loaded yet.

This SO Question covers the same problem: DOM Exception 11

回答11:

This problem occured for me because I used the Audio API like this:

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.

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