开发者

Having trouble using jQuery to set meta tag values [duplicate]

This question already has answers here: 开发者_StackOverflow中文版 Closed 10 years ago.

Possible Duplicate:

Is it possible to use javascript to change the meta-tags of the page?

I'm trying to set meta tags using jQuery (please don't reply that this doesn't make sense since search engines blah-blah-blah... I am loading invoking 3rd party Javascript functions that examine these vales, such as Tweetmeme and Facebook).

If I use:

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

it does work to set the value of an existing meta tag, but does not create a meta tag if such a named one does not exist.

If you have insight or experience with this, please reply...


You can do this, not the cleanest, but what you're trying to do is pretty odd so there's not a great way to handle it:

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

The conditional expression in there checks .length, which is 0 or false if not found, if that's the case we create the element and append it to the head, whether it was added or originally found, mt is set to the <meta> with that name now, and you can set the attribute.


Leveraging Nick's code, I made a function to do the meta tag setting, creating if necessary. Should this be of use to anyone...

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

The metaName most often might be assumed to be "name" but I am also having to set "property" as well, so made the function handle a meta meta-name.


I was just experimenting with this a bit on iOS. It turned out that it was possible to dynamically set a meta tag to prevent zooming on iOS like so:

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

Removing it however, didn't re-enable zooming:

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

But overwriting the meta tag:

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

with its default values did.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜