javascript - вставка текста из div в вызов API для встраивания - PullRequest
Новая
       0

javascript - вставка текста из div в вызов API для встраивания

0 голосов
/ 29 августа 2011

У меня есть следующий базовый скрипт для вызова API в vimeo и вставки встраивания в div #embed. Однако у меня возникли проблемы с тем, чтобы заставить его взять текст другого div #embedthis и собрать из него вызов API.

Приведенный ниже код работает, если он помещен в <body>. Однако я хочу настроить это правильно, так как я хотел бы также иметь возможность динамически изменять содержимое #embedthis, обновляя отображаемую вставку. Любая помощь очень ценится!

сценарий: 

  // URL to get embed
  var videoUrl = document.getElementById('embedthis').innerHTML; 

  // oEmbed endpoint for Vimeo using JSON

  var endpoint = 'http://www.vimeo.com/api/oembed.json';

  // Tell Vimeo what function to call
  var callback = 'embedVideo';

  // Put together the URL
  var url = endpoint + '?url=' + encodeURIComponent(videoUrl) + '&callback=' + callback + '&width=640';

  // put video on page
  function embedVideo(video) {
      document.getElementById('embed').innerHTML = unescape(video.html);
  }

  // load data from Vimeo
  function MakeEmbed() {
      var js = document.createElement('script');
      js.setAttribute('type', 'text/javascript');
      js.setAttribute('src', url);
      document.getElementsByTagName('head').item(0).appendChild(js);
  };

  window.onload = MakeEmbed;

вид: 

<div id="embed">
  ...
</div>

<div id="embedthis">http://vimeo.com/24453255</div>

С этим я получаю document.getElementById('embedthis')" is null, вероятно, потому что #embedthis еще не загружен.

1 Ответ

0 голосов
/ 29 августа 2011

Проблема в том, что когда вызывается var videoUrl = document.getElementById('embedthis').text(), браузер еще не создал <div>, так как этот код вызывается, как только браузер обнаруживает его, что, я полагаю, находится в вашем разделе <head>.

Ваш код должен работать, если вы переместите его в функцию, которая вызывается на window.onload или document.ready, поскольку это гарантирует создание элемента.

Редактировать

Вот так (комментарии для краткости удалены): 

var url;
function embedVideo(video) { ... }

var my_onload = function() {
    var videoUrl = document.getElementById('embedthis').innerHTML; 
    var endpoint = 'http://www.vimeo.com/api/oembed.json';
    var callback = 'embedVideo';
    url = endpoint + '?url=' + encodeURIComponent(videoUrl) + '&callback=' + callback + '&width=640';
    MakeEmbed();
}

window.onload = my_onload;
...