Log in

View Full Version : Resolved I need an alternative in creating a <meta tags using JS code


ksz
03-27-2012, 05:14 PM
I am trying to build a meta tag using JS code. I ran into this thread http://www.codingforums.com/archive/.../t-243464.html which talks about building a JS tags using JS code. So I did the same thing for META tags. The following code worked just fine:
function addJavascript() {
var th = document.getElementsByTagName('head')[0];
var s = document.createElement('meta');
s.setAttribute('http-equiv','Content-Type');
s.setAttribute('content','text/html; charset=utf-8');
th.appendChild(s);
}
I called addJavascript() at window.onload

Now I tried to do the same thing to this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
function addJavascript() {
var th = document.getElementsByTagName('head')[0];
var s = document.createElement('meta');
s.setAttribute('http-equiv','X-UA-Compatible');
s.setAttribute('content','IE=edge');
th.appendChild(s);
}
but nothing happens, as if I didn't declare this meta tag at all.
My guess this meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge" /> needs to be loaded before window.onload because it puts the browser in a special mode.
Also, I tried:
document.head.insertAdjacentHTML( 'afterBegin', '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />' );

and

document.head.insertAdjacentHTML( 'afterBegin', '<meta http-equiv="X-UA-Compatible" content="IE=edge" />' );

The first one worked, while the second was ignored

Also, someone suggested the following code, but it didn't work
<head>

<script>
document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" />')
</script>
<style>

</style>

<script type="text/javascript">


</script>

</head>
traq
03-27-2012, 10:19 PM
Do you mean that the element isn't inserted? or that, in IE, the Document Mode doesn't change as a result?

A quick search seems to indicate that the latter isn't possible.

...and, I just have to ask: is there any reason you're not simply writing that <meta> tag in the actual markup?
ksz
03-28-2012, 05:51 PM
I meant the element is not inserted.
After searching the net and asking around I think I found the answer to my question. It explains the reason why I can't inset the element. Just to share with you what I found, here is the explanation I believe is correct:

"There is no JavaScript equivalent to that since there is no way you will ever get the JavaScript to run soon enough. Even with http-equiv in HTML you are sometimes pushing your luck getting the browser to read it in time. Such commands are best given using a server side language.

For example the ideal way to do that code in PHP is with:
header("X-UA-Compatible: IE=edge");

The HTML version is just a way to try to backward apply that command into the document that has already started loading. Unless it is the very first statement after the <head> tag it is going to be too late for it to be applied since it is really supposed to be applied before the doctype tag is received by the browser.

Even JavaScript attached immediately after the head tag is unlikely to run soon enough to be able to apply an http-equiv - if it were then your approach using the antiquated document.write command would probably have a far better chance of actually working than any of the more modern JavaScript commands that replaced it after Netscape 4 disappeared.

The Content-Type http-equiv also needs to come very clost to the top in order to be recognised.

http-equiv tags should be avoided where ever possible with the appropriate values being defined in the HTTP headers instead.

For other meta tags that are not substituting for http headers the code you used for addJavaScript is the better solution but you don't have to wait for onload to run it - simply attach your JavaScript immediately before the </body> tag and it will be able to run without waiting for all the other files in the page to finish downloading - it only needs the HTML itself to be loaded which will be the case by that point."

Thank you guys for your time and help.
traq
03-28-2012, 07:52 PM
To add to that, <meta> tags are really a "fallback" measure anyway. If a browser has to choose between a <meta> tag and an HTTP header that say different things, the HTTP header will always win out.

Regarding your X-UA-Compatible issue, it's usually perfectly safe to put that in the document, but it does need to be the first thing after the <head> tag.

however: unless you have a specific reason for doing so, I would not use the value "IE=Edge". Having a standards-mode triggering doctype (like <!DOCTYPE html> should accomplish the same thing, assuming your markup is reasonably valid and well-formed.

The X-UA-Compatible is better suited where something works in an older version of IE, but "breaks" (actually, the browser was "fixed") in newer versions. So, while "IE=EmulateIE7" might make sense (at least, as a stopgap until you fix whatever doesn't work in IE8), "IE=Edge", IMO, really makes no sense at all.

2¢