使用jQuery设置meta标签值出现问题

Question

可能是重复问题：
有没有可能使用JavaScript更改页面的元标记(meta tags)?

我正在尝试使用jQuery设置meta tags（请不要回复说这没有意义，因为搜索引擎之类的... 我正在调用第三方JavaScript函数来检查这些值，例如Tweetmeme���Facebook）。

如果我使用：

 $('meta[name=some-name]').attr('content', 'some value');

可以通过设置现有meta标签的值来实现，但如果不存在该名称的meta标签，则不会创建meta标签。

如果您对此有深入了解或经验，请回复...

- Zhami

---

你使用了哪些jQuery代码来创建标签？ - Luke

Answer 1

你可以这样做，虽然不是最简洁的方法，但因为你想要实现的功能比较奇怪，所以没有更好的处理方式：

var mt = $('meta[name=some-name]');
mt = mt.length ? mt : $('<meta name="some-name" />').appendTo('head');
mt.attr('content', 'some value');

上述条件表达式检查 .length，如果没有找到则为0或false，在这种情况下我们创建元素并将其附加到头部，无论是添加还是原始发现，mt 现在被设置为具有该名称的 <meta>，您可以设置属性。

- Nick Craver

---

感谢你的代码，Nick。我所做的可能看起来很奇怪，但这是一个100%客户端应用程序，因此随着用户的操作，元标签的值需要改变以反映当前状态。 - Zhami

嗨，应该是这样的吧：mt.attr('some-name', 'some value')； - Andresch Serj

@Andresch - 不是的，我们正在设置<meta>标签的content="some value"属性，这是该元素的特定属性...您可以在此处阅读更多信息：http://www.w3.org/TR/html4/struct/global.html#h-7.4.4.2 - Nick Craver

@NickCraver：啊，现在我明白了。谢谢！ - Andresch Serj

Answer 2

我在iOS上进行了一些实验。结果发现可以通过动态设置meta标签来阻止iOS缩放，代码如下：

$('<meta>', {
 name: 'viewport',
 content: 'width=device-width, minimum-scale=1, maximum-scale=1'
}).appendTo('head');

然而，删除它并没有重新启用缩放功能：

$('meta[name=viewport]').remove();

但是覆盖元标记：

$('meta[name=viewport]').attr(
 'content',
 'width=980, minimum-scale=0.25, maximum-scale=1.6'
);

使用其默认值。

- Matijs

---

我认为最后一个代码块的第一行应该是： /* $('meta[name=viewport]').attr( */
我添加了一个'.' - KatieK

Answer 3

借助Nick的代码，我创建了一个函数来进行元标记设置，并在必要时进行创建。如果有人需要此功能...

    function setOrCreateMetaTag(metaName, name, value) {
        var t = 'meta['+metaName+'='+name+']';
        var mt = $(t);
        if (mt.length === 0) {
            t = '<meta '+metaName+'="'+name+'" />';
            mt = $(t).appendTo('head');
        }
        mt.attr('content', value);
    }

标签中的metaName一般被认为是"name"，但我也需要设置"property"，因此这个函数处理一个meta-meta名称。

- Zhami

---

我可以建议将函数更改为返回mt吗？您可能还想对其执行其他操作。 - nickf

啊，链式调用，当然。谢谢你提醒我这个模式！ - Zhami