Problem with HTML Parser in IE

Question

I am trying to create a dialog box that will appear only if the browser selected is IE (any version) however I get this error:

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)

That's all in "Line/Char/Code" 0 so I do not know where is the error. The code I'm using is this:

 <script type="text/javascript"> 
  <!--  
  if(BrowserDetect.browser.contains("Explorer"))
  {     
    var Nachricht = 'Hemos detectado que está utilizando ' + BrowserDetect.browser + ' ' +
  BrowserDetect.version + '. Puede que algunas funciones no estén habilitadas. <p></p> Si desea experimentar todo el potencial del portal, por favor intente desde otro navegador (browser). <p></p>Gracias
 showDialog('¡Aviso Importante!',Nachricht,'warning',10);
 } 
 </script>

I've noticed if I remove the "BrowserDetect.browser" and .version it removes the error, but I need those to check =/...any ideas will be appreciated =).

Answer 1

You're modifying document while it's being loaded (when browser hasn't "seen" closing tag for this element) . This causes very tricky situation in the parser and in IE it's not allowed.

IE blog has explanation of this.

The solution is to modify another element that's earlier in the document and has been loaded completely (where browser already saw closing tag for it).

BTW: The string </ is not allowed in <script> element. Use <\/ which is a safe equivalent in JS strings.

Answer 2

I had this same problem. My issue was that I was calling a Javascript function before the containing div was closed.

To fix the problem, I call the Javascript function within the jQuery ready event handler:

$(document).ready(function(){
    some_random_javascript_function();
});

Answer 3

Reading the doc linked by porneL, I found a simple workaround for this problem: Adding a parameter 'defer' to the script, all works fine.

<script defer=true>

Answer 4

Like Sergey Kirienko said: use conditional comments. The code below will only be executed by internet explorer. Microsoft has good information on this page.

<!--[if IE]>
<script type="text/javascript"> 
 showDialog('¡Aviso Importante!','message','warning',10);
 </script>
<![endif]-->

If you want a specific version you can test for that too:

<!--[if lte IE 7]>
    <script type="text/javascript"> 
     showDialog('¡Aviso Importante!','Your are using a too old version of Internet explorer. Please upgrade','warning',10);
    </script>
<![endif]-->

Answer 5

Browser sniffing is a kludge that should be avoided when possible. It's best to sniff for the capability you want to use. Say you want to execute an XPath expression using document.evaluate(), but you don't know whether it's supported. Instead of sniffing for supported browsers, do this:

if (document.evaluate) {
    // go ahead and use it
} else {
    // browser doesn't support it; do something else
}

Answer 6

The best way to address IE only are conditional comments. You don't even need to use JavaScript. See for example http://www.positioniseverything.net/articles/ie7-dehacker.html.

Answer 7

Maybe a little late, but this error also pops up if you are using SWFObject and have 2 divs with the same id.

I had duplicate divs, [with id="flashcontent", thanks to copy&paste].

Solved by renaming the divs with unique ids.

Answer 8

javascript works very easy with navigator.appName. (see http://de.selfhtml.org/javascript/objekte/navigator.htm) You can create an if-query with this. Very easy, just try it!

Answer 9

A current version of https://apis.google.com/js/plusone.js caused this bug on IE8 in one of my sites.

Easiest solution - remove google+.

Easy solution - wrap the code in jquery's document.ready -function or similar:

$(document).ready(function(){
     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
     po.src = 'https://apis.google.com/js/plusone.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
});