Sort out common IE error _javascript techniques

Source: Internet
Author: User
Tags closure garbage collection

For years, IE has been the most difficult browser to debug JavaScript errors. The error message given by IE is usually short and vague. And there is little contextual information, sometimes not even at all. The following sections discuss some JavaScript errors that are difficult to debug in IE.

Operation terminated

In previous versions of IE8, there was an error that was most confusing, annoying, and most difficult to debug relative to other browsers: the operation terminated (Operation aborted). When you modify a page that has not finished loading, an action termination error occurs. When an error occurs, a modal dialog box appears, telling you that the operation is terminated. "Click OK" to uninstall the entire page and then display a blank screen, which is difficult to debug at this point. The following example causes an operation to terminate an error.

<body>
  <div>
    <script>
      document.body.appendChild (document.createelement ("div")); 
    </script>
  </div> 
</body>

The problem with this example is that JavaScript code modifies document.body when the page has not yet been loaded, and the script element is not a direct child of the BODY element. To be exact, when the script node is contained within an element, and the JavaScript code is about to modify the element's parent or ancestor elements using appendchi1d, innerHTML, or other DOM methods, An operation termination error will occur (because only elements that have already been loaded can be modified).

To avoid this problem, you can wait until the target element is loaded and then manipulate it, or use a different action method. For example, adding an absolutely positioned overlay on a page for document.body is a very common operation. Typically, developers use the AppendChild method to add this element, but replacing it with the InsertBefore () method is also easy. Therefore, you can avoid the operation termination error as long as you modify one line of code in the previous example.

<body>
  <div>
    <script>
      document.body.lnsertBefore (document.createelement ("div"), Document.body.firstChild);
    </script>
  </div> 
</body>

In this example, the new DIV element is added to the beginning of the document.body rather than the end. Because all the information required to complete this operation is known at the time the script is run, this does not raise an error.

In addition to changing the method, you can also move the script element from the containing element, directly as the body's child element. For example:

<body>
  <div>
  </div>
    <script>
      document.body.appendChild ( Document.createelement ("div"));
    </script>
</body>

This time, too, the error will not occur because the script modifies its immediate parent element and is no longer an indirect ancestor element.

In the same case, IE8 no longer throws an operation termination error, but instead throws a regular JavaScript error with the following error message:

The HTML parsing error:unable to modify the parent Container element before the child element is closed (KB927917).

However, although the browser throws a different error, the solution remains the same.

Invalid character
JavaScript files must contain only specific characters, depending on the syntax. When an invalid character exists in a JavaScript file, ie throws an invalid character (invalid character) error. An invalid character is a character that is not defined in JavaScript syntax. For example, a character (\u2013) that resembles a minus sign but is represented by a Unicode value of 8211 cannot be used as a regular minus sign (ASCII encoding is 45) because the character is not defined in the JavaScript syntax. This character is usually inserted automatically in a Word document. If your code is copied from a Word document to a text editor and then run in IE, you may experience invalid character errors. Other browsers react to invalid characters similar to IE, Firefox throws an illegal character (Iilegal character) error, Safari reports a syntax error, and opera reports a referenceerror (reference error). Because it interprets invalid characters as undefined identifiers.

No members found
all DOM objects in IE are implemented as COM objects, not as native JavaScript objects. This can lead to some very strange behavior associated with garbage collection. The not-found member (s) error in IE is caused directly by a garbage collection routine that found with errors.

Specifically, if you assign a value to an object after it has been destroyed, the member error is not found. And the cause of this error, must be COM object. The most common scenario where this error occurs is when you use the event object. The event object in IE is the property of the window, which is created when the event occurs, and is destroyed after the last event handler has finished executing. If you use an event object in a closure, and the closure does not execute immediately, then when you call it in the future and assign a value to the event's properties, you will cause no member errors to be found, as shown in the following example.

Document.onclick = function () {
  var event = window.event;
  settimeout (function () {
    event.returnvalue = false;//no member error found
  }, 1000);

In this piece of code, we assign a click event handler to the document. In an event handler, the window.event is saved in the events variable. Then, the closure in the descendant settimeout () contains the event variable. When you click the event handler to finish execution, the events object is destroyed, so the members of the referenced object in the closure become non-existent. In other words, because it is not possible to assign a value to a COM object after it has been destroyed, assigning a value to returnvalue in the closure results in a failure to find a member error.

Unknown run-time Error

An unknown run-time error (Unknown runtime error) occurs when you use innerHTML or outerhtml to specify HTML in the following ways: When you insert a block element into an inline element, the second is to access any part of the table (table, tbody, and so on). Any of the properties. For example, from a technical standpoint, a span label cannot contain block-level elements such as Div, so the following code causes an unknown run-time error:

span.innerhtml = "Div hi/div"; Here, span contains the DIV element
When a block-level element is inserted into an inappropriate location, other browsers try to correct and hide the error, and IE is partners who at this point.

Syntax error

Usually, as long as IE a report has a syntax error (syntax error), you can quickly find the cause of the error. At this point, the reason may be that a semicolon is missing from the code, or that the curly braces do not correspond. However, there is one reason why it is not obvious that the situation requires extra attention.

If you refer to an external JavaScript file and the file does not eventually return JavaScript code, ie throws a syntax error. For example, the SRC attribute of a SCRIPT element points to an HTML file, causing a syntax error. When reporting the location of a syntax error, it is usually said that the error is at the first character in the first line of the script. Opera and Safari also report grammatical errors, but they give you information about the external file that causes the problem; IE does not give this information, so we need to double-check the referenced external JavaScript files ourselves. But Firefox ignores parsing errors in non-JavaScript files that are embedded in a document as JavaScript content.

This error is more likely to occur when the server-side component dynamically generates JavaScript. Many server-side languages insert HTML code into the output when a run-time error occurs, and this HTML-containing output can easily violate JavaScript syntax. If you are having trouble tracking down grammatical errors, we recommend that you double-check the referenced external files to make sure that they do not contain HTML that the server was inserted into because of an error.

The system could not find the specified resource
The system is unable to find the specified resource (the cannot locate the resource specified), and is feared to be the most valuable error message given by IE. This error occurs when you request a resource URL using JavaScript that is longer than the maximum limit of 2,083 characters for IE URLs. ie not only restricts the length of URLs used in JavaScript, but also restricts the length of URLs that users use in their browsers (other browsers have less restrictive URLs). IE has a limit of 2048 characters for URL paths. The following code will cause an error.

function Createlongurl (URL) {
  var s = "?";
  For (Var i=0, len= 2500 i < len; i++) {
    S + = "a";
  }
  return URL + S;
}

var x = new XMLHttpRequest ();
X.open ("Get", Createlongurl ("http://www.somedomain.com/"), true);
X.send (NULL);

In this example, the XMLHttpRequest object attempts to send a request to a URL that exceeds the maximum length limit. An error occurs when the open () method is called. The way to avoid this problem is to shorten the length of the query string by giving a shorter name to the query character parameter or by reducing unnecessary data. Alternatively, you can change the request method to post and send the data through the request body instead of the query string.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.