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

发布于 2024-12-08 21:36:55 字数 560 浏览 0 评论 0原文

我使用以下 jquery 将元标记插入到 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 但我不确定如何做。

以防万一您想知道，我将元标记插入到我的 html 中，以优化该网站以便使用 iPhone 进行查看。不幸的是，width=device-width 不是一个选项，因为它与我的 ipad 版本不能很好地配合。

原文

I used the following jquery to insert a metatag into a html document.

<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>

If possible, I'd like to insert the metatag without using jquery. Anyone have any ideas how I can do that?

I believe I will probably need to use document.getElementByTagName but I'm not sure how.

Just in case you are wondering, I am inserting the metatag into my html to to optomize the site for viewing with the iphone.
Unfortunately, width=device-width is not an option as it doesn't play well with my ipad version.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅唱々樱花落 2024-12-15 21:36:55

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

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

回复收藏 0 原文

骑趴 2024-12-15 21:36:55

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

Javascript solution:

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

回复收藏 0 原文

傻比既视感 2024-12-15 21:36:55

您还可以使用“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 Web 应用程序。

You can also use "setAttribute" (rather than the "dot" notation) for weirdo attribute names (that contain non-alpha-numeric characters).

Example:

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

The example above causes IE (<=9) to always use the latest document standards mode. Sometimes IE will fall back to older standards, and therefore break your modern javascript / canvas web app.

回复收藏 0 原文

来日方长 2024-12-15 21:36:55

这是创建元标记（如果尚不存在）的解决方案：

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

Here is a solution that creates a meta tag, if it does not already exist:

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

回复收藏 0 原文

~没有更多了~