首页 文章

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

提问于
浏览 次
3

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

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

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

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

所以我想把Share按钮放在播放器iframe中，然后在视频发生变化时动态更新元数据标签，但我不确定如何解决这个问题 .

任何帮助将不胜感激，谢谢 .

javascript dynamic iframe metadata meta-tags

4 回答

  • 10

    你想在jQuery的代码中做这样的事情

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

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

    $('head').append('<meta .... />');
    回复于
  • 5

    由于以上两个解决方案都使用JQuery，这里有一个纯粹的 javascript 解决方案，如果有人在寻找：

    更改 Headers ：

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

    祝好运 .

    回复于
  • 0

    @ bernabas在简单的JavaScript中的回答：

    document.head.textContext += '<meta ... />'
    回复于

相关问题