How to add meta tag in JavaScript
Asked Answered
T

6

61

I want to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> for a particular page.

But my pages are rendered inside one HTML tag. Only the content is changing on clicking different templates. So i cannot add the <meta> in <HEAD> section.

Is there any way to add the <meta http-equiv="X-UA-Compatible" content="IE=edge"> using javascript ?

Trotskyite answered 24/9, 2013 at 12:56 Comment(4)
You can't do meta tags with JavaScript. You can add the tag to the template or you can set the header from the HTTP server.Soberminded
I believe this has been answered here: #7064363Peracid
@Dontfeedthecode I seriously doubt that that answer actually works.Soberminded
@Dontfeedthecode: And relies on jQuery, which this question doesn't mention.Sergias
S
93

You can add it:

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);

...but I wouldn't be surprised if by the time that ran, the browser had already made its decisions about how to render the page.

The real answer here has to be to output the correct tag from the server in the first place. (Sadly, you can't just not have the tag if you need to support IE. :-| )

Sergias answered 24/9, 2013 at 12:59 Comment(5)
I can confirm that adding the meta tag dynamically doesn't work in IE8.Montero
I've been able to force Quirks instead of IE 7 Standards by replacing the whole document content using document.write. Perhaps there's a way to create a new document object in IE8 and replace the current document with that new one, which hopefully will trigger a reevaluation of the document mode. The createDocument function isin't available in IE8, but I guess we could rely on an iframe to create a new document instance.Montero
IE sucks.No use of this in IE because as soon as page rendering is started n thing is specified or there is a conflict IE take a stand in favor the dead man i.e. IE7.Cape
Can I use document.head.appendChild() instead?Gittel
@Gittel - If your browser supports it, yes. I think all modern ones do.Sergias
N
23
$('head').append('<meta http-equiv="X-UA-Compatible" content="IE=Edge" />');

or

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.getElementsByTagName('head')[0].appendChild(meta);

Though I'm not certain it will have an affect as it will be generated after the page is loaded

If you want to add meta data tags for page description, use the SETTINGS of your DNN page to add Description and Keywords. Beyond that, the best way to go when modifying the HEAD is to dynamically inject your code into the HEAD via a third party module.

Found at http://www.dotnetnuke.com/Resources/Forums/forumid/7/threadid/298385/scope/posts.aspx

This may allow other meta tags, if you're lucky

Additional HEAD tags can be placed into Page Settings > Advanced Settings > Page Header Tags.

Found at http://www.dotnetnuke.com/Resources/Forums/forumid/-1/postid/223250/scope/posts.aspx

Neurath answered 24/9, 2013 at 13:12 Comment(0)
K
11

Like this ?

<script>
var meta = document.createElement('meta');
meta.setAttribute('http-equiv', 'X-UA-Compatible');
meta.setAttribute('content', 'IE=Edge');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
Kloster answered 24/9, 2013 at 12:59 Comment(1)
You don't need setAttribute for this, both httpEquiv and content are reflected.Sergias
A
8

As specified by @marcellothearcane, for modern browser, you can also use:

var meta = document.createElement('meta');
meta.httpEquiv = "X-UA-Compatible";
meta.content = "IE=edge";
document.head.appendChild(meta);

Supported browser here: document.head

Arlettearley answered 18/8, 2021 at 16:41 Comment(0)
P
2

Try

document.head.innerHTML += '<meta http-equiv="X-UA-..." content="IE=edge">'
Pleura answered 9/6, 2020 at 20:30 Comment(0)
F
0

To get started, create your standard HTML boilerplate with a DOCTYPE, html, head, and body, then add a meta tag for the charset. Add a title element and use the text RPG - Dragon Repeller for it. Include a link tag for your stylesheet to link the styles.css file.

Finally, create a div element with id set to game within your body.change in code

Farahfarand answered 7/4, 2024 at 10:40 Comment(1)
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From ReviewMarthmartha

© 2022 - 2025 — McMap. All rights reserved.