使用jQuery动态更改元标记

Changing meta-tags dynamically with jQuery

本文关键字：jQuery 动态 使用      更新时间：2023-09-26

我有一个包含多个段落的页面，当用户单击段落旁边的"快照"按钮时，该段落将在画布上以图像的形式复制并显示在原始段落上方。

快照段落旁边是一个"共享"按钮，我如何在单击"共享"键时将以下元标记内容的url更改为快照段落的url。

共享按钮

<a href="#" id="share">Share?</a>

分享按钮前点击

<meta name="twitter:image" content="p.jpg">

单击共享按钮后

<meta name="twitter:image" content="image/paragraphxi34343.jpg">

有什么解决方案吗？

不确定这是否是优化的方法，但这应该有效。

$("meta").each(function() {
  if($(this).attr("name") == "twitter:image") {
    $(this).attr("content" , "image/paragraphxi34343.jpg");
  };
});

一种更通用的方法是

function changeMetaContent(metaName, newMetaContent) {
    $("meta").each(function() {
      if($(this).attr("name") == metaName) {
        $(this).attr("content" , newMetaContent);
      };
    });
}

像一样呼叫

changeMetaContent("twitter:image", "image/paragraphxi34343.jpg");

在评论中讨论后更新

如果您在输入字段中有url，请执行此操作。

<input value="http://some-image-url.png" type="hidden" id="image-url-input" />

这样调用函数；

var imageURL = $("image-url-input").val();
changeMetaContent( "twitter:image", imageURL );

$('head meta[name=twitter:image]').attr('content', 'image/paragraphxi34343.jpg');

看看：https://api.jquery.com/attr/

相关文章：