Javascript для динамического изменения метаданных / метатегов

Question

Я опишу, что я пытаюсь сделать, и если мне кажется, что мой метод глуп, пожалуйста, дайте мне знать:

У меня есть страница с видео-галереей и флеш-плеером iframe. Когда пользователь нажимает на миниатюру видео, оно начинает воспроизводиться в кадре.

Пользователи также могут перейти на страницу с конкретным видео, загруженным в iframe, добавив путь к файлу в конец URL-адреса - blabla.com/videogallery?videofilepath. Я настроил это так, чтобы видео можно было легко обмениваться.

Я хочу иметь возможность добавлять кнопки «Поделиться» для 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

Поскольку два вышеупомянутых решения используют 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

Вы можете добавить что угодно в тег head, используя this (jquery)

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

Answer 4

Краткий ответ в чистый javascript .

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

Answer 5

@ ответ Бернабас на простом древнем JavaScript:

document.head.textContext += '<meta ... />'