How to inject NoScope elements into a page

Source: Internet
Author: User

How to inject NoScope elements into a page with innerHTML
You can inject script with innerHTML, but it can be a little tricky. The example abve works around this limitation, but doesn't really explain how it is done.
 
Internally, Internet Explorer treats the <script> tag as a NoScope element, which means (according to a rather opaque comment in the source) that "no text in a textrun shocould point to it. "Examples of other tags that have this attribute are HTML comments (<! -->) And STYLE tags. all NoScope elements are removed from the beginning of the parsed HTML before it is injected with innerHTML or insertAdjacentHTML. to prevent this from happening, you must include at least one scoped element at the beginning of the injected HTML.
 
The following example injects a script block into the injectionDiv, but nothing happens.
 
<Div id = "injectionDiv"> </div> <script type = "text/javascript"> injectionDiv. innerHTML = '<script defer> alert ("hello"); </' + 'script> '; </script>
To make it work, you must start the injected HTML string with a scoped element, preferably an invisible one like a hidden input element.
InjectionDiv. innerHTML = '<input type = "hidden"/> <script defer> alert ("hello"); </' + 'script> ';
Note The strange '</' + 'script> 'construct prevents the real script block from closing prematurely.
 
The same rules apply to injected STYLE elements. All we have to do is put the style block after the element it modifies.
InjectionDiv. innerHTML = '<div class = "myClass"> </div> <style type = "text/css">. myClass {background-color: green;} </style> ';
That said, you really shocould put all style rules in the HEAD for strict compliance with XHTML. doing this can also be a little tricky because you cannot use innerHTML to inject into the HEAD or STYLE element directly. (Both of these tags are read only .) the best way to dynamically add styles to a page is to wait for the document to load, and then create the rule in a new style sheet.
 
Window. onload = function () {document. createStyleSheet (). addRule ('. myclass', 'background-color: blue! Important ;');}
 
"The property is read/write for all objects tables t the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR."

Related Article

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.