Let the script inserted into the InnerHTML run up Code 1th/2 page _javascript tips

Source: Internet
Author: User
Tags script tag set time
When doing Ajax programming, we often need to get XMLHTTP to the content of the page through the InnerHTML to assign to a container (such as Div, span or TD, etc.), but there is a problem, is that we will be assigned to InnerHTML page content if contains a script program , these scripts, whether external or internal, may (1) not be executed. The problem is trivial at times and can be ignored, but sometimes the problem is very serious and it is likely to leave our programs without the expected results. So we need to solve this problem.

If you've read MSDN, you'll find that not all scripts inserted into InnerHTML can be executed, IE will execute these scripts correctly if the script tag contains the defer attribute. Unfortunately, Moziila/firefox and Opera do not eat this set, regardless of whether the script tags have set defer properties, these browsers do not go to IE to perform the script inserted into the InnerHTML.

But whether or not the script is executed, one thing we can be sure of is that the scripts are actually plugged into the InnerHTML, and if you don't believe it, you can check it out. But if you are really alert, you may also find that an exception exists, that is, if the script starts with the InnerHTML content, IE will ignore the script, and Moziila/firefox and Opera will not.

Well, the problem analysis is similar, let's see how to solve it.

The solution is simply that all the scripts inserted into the InnerHTML are taken out and executed. But first we have to solve the two problems above.

Let's look at the first question, how to avoid repeatedly executing the script with the defer attribute in InnerHTML in IE. This is easy, just to determine whether the browser is IE, and then detect whether the script will be executed with the defer attribute. It should be noted that in the judgment of IE browser, we need to avoid being deceived by opera's browser recognition. That's what we'll see in the code that follows.

Next, see IE ignore InnerHTML start script of problem, this also very easy to solve. You just need to append a piece of content that is not scripted to the beginning of the content you want to insert into the InnerHTML. But do not attempt to append an empty content label, or a space, carriage return, newline, etc., which will not work, the beginning of the script will still be ignored. Do not attempt to attach, although this can make the beginning of the script is no longer ignored, but this will still affect the original content of the display, although you may not feel obvious, but for picky users, this may be intolerable. Therefore, in order for the additional content to be able to prevent the opening script from being ignored and not adversely affected, we will append this section:

<span style= "Display:none" >hack ie</span>
Although the above paragraph has a certain length, but it does not appear, and the inserted label has no ID and no name, so it does not conflict with the ID or name of some tags in the original content. But here is a point to be aware of, but also to determine whether it is IE, and then decide to add this paragraph, because some other browsers may not support Display:none this CSS decoration (such as Opera Mini), if you add this code will affect the final display effect.

Let's look at how to take out the script and execute it.

It's easy to take out a script, just use the InnerHTML object's getElementsByTagName method, which works for almost any container tag. After we take out the script, we have to decide whether they are an external script or an internal script.

Let's look at the external script, and if it's an external script, we chose a method that first creates a replica object of this external script and sets its Defer property to True (this is to allow IE to execute correctly) and then inserts the replica object into the AppendChild method. Head. Here you may ask, why not insert into the object of InnerHTML? Is it better to insert into the object that InnerHTML is in? If you try it, you will know that if you insert into the object of InnerHTML, there is no problem in IE browser, but there are some problems in the Mozilla/firefox and Opera browsers. The problem is that if you do this on Firefox, the browser stops responding (this is the test result on Firefox 1.5, the other version is not yet known), and in opera, the script will be inexplicably executed two times (this is the test results on Opera 8.5, the other version of the O Pera Whether this problem, also not yet known. To avoid these problems, I chose to insert it into the head.

Looking at the internal script, the contents of the internal script can be obtained directly with the Text property of the script object, where we use the Text property of the script object instead of the InnerHTML property, because in the Opera browser, the InnerHTML property of the Script object is empty, only the text property to get the script content. Execute internal scripts directly with Eval. However, the script may be included in the HTML annotation tag, so we need to remove the annotation tag first, otherwise there will be an error in IE.

The above analysis looks perfect, but in fact there are still problems, one is document.write and document.writeln problem, the problem in Blueidea, Bound0 gave a thought, is to replace the default Document.Write and Document.writeln methods, but he used string substitution, so only for internal scripts, not for external script, so I think a more general way, is directly to the document.write and Document.writeln, so that both internal script and external script execution are the document.write and Document.writeln we define ourselves. However, there are side effects, that is, these two functions in the current page can not be used as the original, but these two functions after the page load is generally not used again, so there is a redefinition of the side effects of their impact is very small. But the other problem is that, despite this, we still can't guarantee that the contents of the document.write or Document.writeln output will be displayed in the most appropriate place, it just attaches the content to the container where we put the content.

Another problem is that eval causes problems, one is the scope of Hutia on Blueidea, and the other is that if an internal script is executed with Eval, the internal script will start executing before the external script loads. To solve the two problems you can use the Window.settimeout function, so that each script can be deferred after a period of execution, the external script delay time may be set longer to ensure that it can be fully loaded, and the internal script can be set to very short, because a script execution time is usually very short, This guarantees that the scope will not be changed, you can basically guarantee that the execution order of the scripts will not change (this method is not necessarily 100% effective in the order of execution, and if the network is very busy, the external script may not load over the set time, but at least it is much better than when you directly use eval).

——————————–
(1) Note: Here we use the qualifier "possible" because in one case the script will be executed, and you will see this in the following.

Current 1/2 page 12 Next read the full text

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.