使用 JS/JQuery 单击/共享时更改元描述？
Posted
技术标签:
【中文标题】使用 JS/JQuery 单击/共享时更改元描述？【英文标题】：Change Meta Description on Click / Share with JS/JQuery? 【发布时间】：2014-08-10 08:03:31 【问题描述】：我有一个包含各种元素的页面，如下所示：
产品标题 1 产品图片1 产品说明1分享 1 个链接
产品标题 2
产品图片2 产品说明2分享 2 链接
产品标题 3
产品图片3 产品说明3 分享3个链接我希望当用户想要分享该产品时，OG 元元素会根据用户分享的内容而改变。例如，页面可能有“为您提供的一些产品”的元描述，但当用户分享产品 2 时，该描述将更改为“产品 2 的描述”。与图片/标题/等相同。
我有以下概念证明，我已将其他线程放在一起，但它不起作用。好吧，标题部分发生了变化，但元数据没有变化。
这里最大的挑战是要求必须在 html 和 JS/Jquery 中完成 - 没有 php，没有 ASP 等。
<!DOCTYPE html>
<head>
<title>This title is not exciting</title>
<meta id="mtdesc" name="description" content="" />
<meta property="og:title" content=""/>
<meta property="og:image" content=""/>
<meta property="og:site_name" content=""/>
<meta property="og:description" content=""/>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
</head>
<body>
<button>Change description</button>
<script type='text/javascript'>
$('button').on('click', function()
// Just replacing the value of the 'content' attribute will not work.
$('meta[property="og:title"]').remove();
$('meta[property="og:description"]').remove();
$('meta[property="og:url"]').remove();
$("head").append('<meta property="og:title" content="blubb1">');
$("head").append('<meta property="og:description" content="blubb2">');
$("head").append('<meta property="og:url" content="blubb3">');
$("#mtdesc").attr("content","music all the time");
$(document.title = "Now I've changed it");
);
</script>
</body>
【问题讨论】：
【参考方案1】：你说“仅仅替换'content'属性的值是行不通的。”。为什么？
这是一个例子 -
$('button').click(function()
$('meta[property="og:title"]').attr('content', 'foo');
);
我已将该元标记的内容属性设置为 foo。无需删除和附加。
【讨论】：
代码中的注释实际上来自编写此示例的人。我一定做错了什么，因为当我查看源代码时，元信息没有改变 - 有没有办法让我测试它，以便我可以看到正在传递的元数据？也许从浏览器查看源代码不是正确的方法。 查看源代码不是正确的方法，因为源代码是从服务器到浏览器的。要查看更改，您必须在浏览器的开发人员工具中使用 DOM 检查器。如果您从未见过这些，只需在浏览器获得焦点时单击 F12。以上是关于使用 JS/JQuery 单击/共享时更改元描述？的主要内容，如果未能解决你的问题，请参考以下文章