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

Question

我将描述我想要完成的事情,如果我的方法看起来很愚蠢,请随时告诉我:

我有一个带有视频库和flash视频播放器iframe的页面.当用户点击视频缩略图时,它开始在框架中播放.

用户还可以通过将文件路径附加到url的末尾 - blabla.com/videogallery?videofilepath来转到加载到iframe中的特定视频的页面.我进行了设置,以便轻松分享视频.

我希望能够为facebook/twitter添加分享按钮,但我无法让它们工作并使用正确的元数据(图像和标题)正确呈现自己.

所以我想把Share按钮放在播放器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

你可以使用this(jquery)在head标签中添加任何内容

$('head').append('<meta .... />');

Answer 3

由于以上两个解决方案都使用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 4

纯 javascript 中更简短的答案。

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