Блог

Главная - Вопросы по программированию - Как вставить метатег без использования jquery append?

Как вставить метатег без использования jquery append?

#javascript #append #meta-tags #getelementsbytagname

#javascript #добавить #мета-теги #getelementsbytagname

Вопрос:

Я использовал следующий jquery для вставки метатега в html-документ. 

 <script type="text/javascript">
if(screen.width>=320 amp;amp; screen.width<=767){
$('head').append('<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">');}    
</script>

Если возможно, я бы хотел вставить метатег без использования jquery. У кого-нибудь есть идеи, как я могу это сделать?

Я полагаю, что мне, вероятно, потребуется использовать document.getElementByTagName, но я не уверен, как это сделать.

На всякий случай, если вам интересно, я вставляю метатег в свой html, чтобы настроить сайт для просмотра с iphone. К сожалению, width=device-width — это не вариант, поскольку он плохо сочетается с моей версией для ipad.

Комментарии:

1. Просто из любопытства, вы уверены, что мобильные устройства запускают ваш Javascript перед проверкой мета-тега?

2. Я протестировал его на ipad и iphone, и он работает. Хороший вопрос. Я не уверен ни в каких других устройствах. Я попробую Android позже.

3. На самом деле, я беру свои слова обратно. Я обнаружил, что iphone не постоянно обнаруживает метатег (по крайней мере, я думаю, что это проблема). Иногда это работает, иногда нет. Я думаю, что вместо этого я буду использовать php и просто перенаправлю на страницу, специфичную для мобильных устройств.

4. Я заметил, что точки с запятой в разделе «содержимое» неверны, должны быть запятыми: «ширина = 320, начальный масштаб = 1, …»

Ответ №1:

 var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);

Ответ №2:

Решение на Javascript:

 document.getElementsByTagName('head')[0].innerHTML  = '<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">';

Ответ №3:

Вы также можете использовать «setAttribute» (вместо обозначения «точка») для странных имен атрибутов (которые содержат не буквенно-цифровые символы).

Пример:

 var iefix=document.createElement('meta');
iefix.setAttribute("http-equiv", "X-UA-Compatible");
iefix.setAttribute("content", "IE=Edge");
document.getElementsByTagName('head')[0].appendChild(iefix);

Приведенный выше пример приводит к тому, что IE (<=9) всегда использует режим последних стандартов документов. Иногда IE возвращается к более старым стандартам и, следовательно, нарушает работу вашего современного веб-приложения javascript / canvas.

Ответ №4:

Вот решение, которое создает мета-тег, если он еще не существует:

 var viewport = document.querySelector('meta[name=viewport]');
var viewportContent = 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0';

if (viewport === null) {
  var head = document.getElementsByTagName('head')[0];
  viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  head.appendChild(viewport);
}

viewport.setAttribute('content', viewportContent);