Question

我使用以下jquery将metatag插入到html文档中。

<script type="text/javascript">
if(screen.width>=320 && 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，但我不确定如何。

万一你想知道，我将metatag插入到我的html中，以便用iphone来观看网站。不幸的是，width = device-width不是一个选项，因为它与我的ipad版本不兼容。

Answer 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);

Answer 2

你也可以使用＆＃34; setAttribute＆＃34; （而不是＃34; dot＆＃34;表示法）用于怪异属性名称（包含非字母数字字符）。

示例：

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

上述示例使IE（＆lt; = 9）始终使用最新的文档标准模式。有时IE会回归到旧标准，因此会破坏您现代的javascript / canvas Web应用程序。

Answer 3

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;">';

Answer 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);

如何在不使用jquery追加的情况下插入元标记？

4 个答案: