Override meta tag with a new meta tag

Question

I am working on a asp page and I would like to override "meta http-equiv="X-UA-Compatible" content="IE=8"" with "meta http-equiv="X-UA-Compatible" content="IE=10"" in one of the pages using JavaScript. Is it possible? I have tried the following with no success.

    window.onload = function(e){ 
    $('meta[http-equiv="X-UA-Compatible"]').remove();
    $('head').append('<meta http-equiv="X-UA-Compatible" content="IE=10">')
}

Or instead of removing you can just use `attr` function like `.attr("content","IE=10")` — MJN, Dec 10 '18 at 23:29
@Manjunath: I tried doing attr function like $('meta[http-equiv="X-UA-Compatible"]').attr('content','IE=10'); and it still did not work — user9808783, Dec 10 '18 at 23:47
Can you tell us Where and how are you including this scripts? — MJN, Dec 11 '18 at 02:40
This will not work because by the time `window.onload` is fired, the meta tag is already read, the compatibility flag set, and the document parsed in that mode. This needs to be changed on the server. — Heretic Monkey, Dec 11 '18 at 15:07
Possible duplicate of [changing X-UA-Compatible meta tag with javascript based on iframe url](https://stackoverflow.com/questions/14900084/changing-x-ua-compatible-meta-tag-with-javascript-based-on-iframe-url) — Heretic Monkey, Dec 11 '18 at 15:09
@Manjunath: I am including the script on the page that I am working on As Heretic has mentioned, it will not work do to the explanation given. — user9808783, Dec 11 '18 at 17:29

score 0 · Answer 1 · answered Dec 10 '18 at 23:19

0

it is possible, but you need to call .remove() (missed the ())

although I'm not sure what you wish to accomplish will actually work (if you want to make IE behave differently)

answered Dec 10 '18 at 23:19

Tiago Coelho

5,023
10
17

I realize that and I added the missing "()". However, it still does not work. – user9808783 Dec 10 '18 at 23:21

Reza Saadati · Answer 2 · 2018-12-11T00:12:46.200

0

Try it with this:

jQuery

if (window.location.pathname === 'myPage') { // URL is example.com/myPage
    $('meta[http-equiv="X-UA-Compatible"]').replaceWith('<meta http-equiv="X-UA-Compatible" content="IE=10">'); 
}

Vanilla JS

if (window.location.pathname === 'myPage') { // URL is example.com/myPage
    document.querySelector('meta[http-equiv="X-UA-Compatible"]').outerHTML = '<meta http-equiv="X-UA-Compatible" content="IE=10">';
}

edited Dec 11 '18 at 00:12

answered Dec 10 '18 at 23:28

Reza Saadati

5,018
4
27
64

@user9808783 what exactly is not working? Do you get an error message? Does it work without the if statement? – Reza Saadati Dec 10 '18 at 23:45
@ Reza: By not working, what I mean is the meta tag that contains content="IE=8" is not being replace with "IE=10" – user9808783 Dec 10 '18 at 23:48
@user9808783 I have tested it on JSFiddle and it works for me. https://jsfiddle.net/RezaScript/2ozpc9t8/ – Reza Saadati Dec 11 '18 at 00:00
@ Reza: I see you are using Jquery 3.3.1. Unfortunately, I am using 1.6.1. Is there an approach in that version – user9808783 Dec 11 '18 at 00:05
I have also tried the attr(), if I am reading the documentation correctly for 1.6.1, but it also did not work – user9808783 Dec 11 '18 at 00:08
@user9808783 no, that cannot be the reason, since the function `replaceWith()` exists since the version 1.2. But you could also try it with pure JavaScript. I have updated my answer. It's tested and it works as well. – Reza Saadati Dec 11 '18 at 00:15

score 0 · Answer 3 · answered Dec 10 '18 at 23:29

Put your answer in $(document).ready(). Since you're using jQuery you can do:

$(function() {
    $('meta[http-equiv="X-UA-Compatible"]').remove();
    $('head').append('<meta http-equiv="X-UA-Compatible" content="IE=10">');
});

Here is a good explanation on the difference between window.onload and $(document).ready(): window.onload vs $(document).ready()

Override meta tag with a new meta tag

3 Answers3