Javascript动态更改元数据/元标记

Question

我将描述我试图实现的目标，如果我的方法看起来很愚蠢，请随时让我知道：

我有一个页面与视频画廊和flash视频播放器iframe。当用户单击视频缩略图时，它开始在帧中播放。

用户还可以通过将文件路径附加到url - blabla.com/videogallery?videofilepath的末尾，转到加载到iframe中的特定视频的页面。我设置了这个，这样视频就可以很容易地被分享。

我希望能够为facebook/twitter添加共享按钮，但我无法让它们正常工作，并使用正确的元数据(图像和标题)正确地显示它们自己。

所以我想把分享按钮也放在播放器iframe中，然后在视频发生变化时动态更新元数据标签，但不确定如何进行。

任何帮助都将不胜感激，谢谢。

Answer 1

您想在jQuery的代码中这样做吗？

$(document).ready(function(){
    $('title').text("Your new title tag here");
    $('meta[name=description]').attr('content', 'new Meta Description here');
});

Answer 2

由于上面两个解决方案都使用了JQuery，这里有一个纯javascript的解决方案，以防万一任何人正在寻找：

要更改标题，请执行以下操作：

<script>document.title = "this is title text";</script>

要更改任何元标记，请执行以下操作：

<meta name="description" content="this is old content which we are going to change through javascript">

更改上述元标记的javascript代码。

<script>
var allMetaElements = document.getElementsByTagName('meta');
//loop through and find the element you want
for (var i=0; i<allMetaElements.length; i++) { 
  if (allMetaElements[i].getAttribute("name") == "Description") { 
     //make necessary changes
     allMetaElements[i].setAttribute('content', "description you want to include"); 
     //no need to continue loop after making changes.
     break;
  } 
} 

​

祝好运。

Answer 3

用纯javascript编写的简写答案。

document
      .getElementsByTagName('meta')
      .namedItem('description')
      .setAttribute('content','My Meta Description Here')