Question 282945 in Html Question posted in
Some basic documentation can be found here.

Html – Comments before head tag breaks javascript code

I am writing additional javascript code that is being parsed by a PC client that runs in an instance of IE 7.

The original HTML code I am modifying does not have a doctype declaration and html meta tags. Also, the original HTML code has a multiline comment immediately after the opening HTML tag like this:

<html>
       <!-- 
              Some comments 
              Some more comments 
              Some more comments 
       -->
       <head>
       </head>

       <body>
       </body>
</html>

When I add a doctype declaration and meta tags to make the code look like this:

<!DOCTYPE html>
<html>
       <!-- 
              Some comments 
              Some more comments 
              Some more comments 
       -->
       <head>
              <meta name="viewport" content="width=device-width,initial-scale=1">
              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
       </head>

       <body>
       </body>
</html>

I start to get weird errors like Object doesn’t support property or method ‘query Selector’ when I try DOM manipulation.
I understand having comments immediately after the opening html tag may be invalid HTML but I cannot relocate the comments as that causes other parts of the PC client to fail. I have no access to the source code of the PC client and I think it was written in C#.

What can I do?

Tags:

2

Answers


  1. 0

    Internet Explorer 7 is exceptionally ancient. It does not support querySelector.

    Login or Signup to reply.
  2. 0

    Working with a legacy system that relies on specific HTML structure and potentially lacks modern HTML and doctype declarations can indeed pose challenges, especially when you need to make updates or enhancements.

    Here are a few suggestions that might help you navigate this situation:

    1. Conditional Comments:
    Internet Explorer (including version 7) supports conditional comments. You might try adding conditional comments around the meta tags to target specific versions of IE. For example:

    <!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<![endif]-->

    This way, you can include the meta tag only for versions of IE that need it.

    2. JavaScript Feature Detection:
    Instead of relying on conditional comments, you can use JavaScript feature detection to apply specific changes only when needed. For example, you can check if querySelector is supported before using it:

    if (document.querySelector) {
     // Your DOM manipulation code here
}

    3. JavaScript Polyfills:
    Consider using polyfills for missing functionality in older browsers. There are libraries and scripts available that can add support for modern JavaScript features in older browsers. For example, you might use a polyfill for querySelector:

      <!--[if lt IE 9]>
  <script 
src="https://cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js"></script>
  <![endif]-->

    Make sure to check the licensing and compatibility of any polyfills you choose.

    4. IE Emulation Mode:
    The X-UA-Compatible tag might affect how IE renders the page. You can experiment with different values to see if it resolves or mitigates the issues. For example:

     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    However, keep in mind that this approach might introduce its own set of challenges.

    5. Document Mode:
    If the PC client runs in a specific document mode, you might need to ensure that your HTML and JavaScript are compatible with that mode. You can set the document mode using the x-ua-compatible header on the server side.

     <meta http-equiv="X-UA-Compatible" content="IE=7" />

    Again, this might have unintended consequences, so thorough testing is essential.

    6. Testing:
    Ensure that you thoroughly test any changes in multiple versions of Internet Explorer and the PC client. Sometimes, seemingly innocuous changes can have unexpected consequences.

    Keep in mind that working with outdated technology and browsers can be challenging, and finding the right balance between making improvements and maintaining compatibility is often a delicate task.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search