changing X-UA-Compatible meta tag with javascript based on iframe url

问题

context:

I am working on a large site with some old controls that break in newer browsers so we have had to force IE7 document mode with your standard meta X-UA-Compatible tag. We have replaced most of the problem controls but do not have the time and budget to replace them all. We would like to have the pages that dont have the controls to render in the current document mode for IE browsers to take advantage of the client side performance boosts that that provides. The problem is that I am having trouble getting that the newer ie browsers to switch modes like i want. The navigation of the site uses an iframe which i feel is probably my main issue. I have my javascript on the parent page with the iframe.

I would like to be able to do this with javascript, and have been attempting to do so. Here is what I am doing. It successfuly changes the Tag, but the browser doesnt seem to care. What do I need to change in order for the browsers to consider the Tags?

     //tag swapping code 
     function FixIEMetaTag(url) {

         //Remove current IE meta Tag
         var iefixTagOld = document.getElementsByTagName('meta')[0];
         if (iefixTagOld) { iefixTagOld.parentNode.removeChild(iefixTagOld); }

         //Determine Document Type for IE browsers
         var contentVal = 'IE=Edge';             
         if (IsPageWithBadGrid(url)) { contentVal = 'IE=7'; }

         //Create and add new IE meta Tag
         var iefixTag = document.createElement('meta');
         iefixTag.setAttribute("http-equiv", "X-UA-Compatible");
         iefixTag.setAttribute("content", contentVal);
         var theHead = document.getElementsByTagName('head')[0];
         theHead.insertBefore(iefixTag, theHead.firstChild);
     }

     //navigation code
     function GoToPage(url) {

         if (window.frames["ifrm"]) {

             FixIEMetaTag(url);

             window.open(url,"ifrm");
             return false;
         }

         return true;
     }

回答1:

To be effective, the X-UA-Compatible meta tag must be present when the page is loaded. By the time that Javascript runs, it's too late to change.

If you really need to switch IE7 mode on and off for the content of an iframe, your best bet is to keep two versions of the page with different X-UA-Compatible tags, or to pass the compatibility flag in via a URL parameter (e.g, ?mode=ie7 vs. ?mode=edge).

回答2:

Just as a thought of what i should do based on the answers and comments so far...

It sounds as if i need to reload the main page to change the IE meta tag. Based on my current code im thinking something like this:

 //navigation code
 function GoToPage(url) {

     if (window.frames["ifrm"]) {

         var oldContentTagValue = 'IE=Edge';  
         //Determine Previous IEType tag
         var iefixTagOld = document.getElementsByTagName('meta')[0];
         if (iefixTagOld) { 
             oldContentTagValue = (?);//something fancy to get current tag type

         }

         //Determine Document Type for IE browsers
         var contentVal = 'IE=Edge';             
         if (IsPageWithBadGrid(url)) { contentVal = 'IE=7'; }

         if(oldContentTagValue !=contentVal ){
             //redirect to current page with contenttypetag stuff and iframe url in query string
         }
         else{
             window.open(url,"ifrm");
         }
         return false;
     }

     return true;
 }

And then i would set the iframe url and correct meta tag on load, based on the query string params... Thoughts?

来源：https://stackoverflow.com/questions/14900084/changing-x-ua-compatible-meta-tag-with-javascript-based-on-iframe-url