Как вы можете обнаружить ссылку в тексте и использовать oembed / jquery для ее изменения (например, Facebook, Twitter и т. Д.) - PullRequest
1 голос
/ 08 мая 2011

Я хочу, чтобы пользователи могли скопировать и вставить ссылку на что-либо и, используя oembed, вставить ее в текстовое поле. Отсюда я хочу иметь возможность идентифицировать URL-адрес и превратить его в раскрытый объект или как бы вы его ни называли. (например, Youtube Page => URL => textarea => oembed => embeded)

Ответы [ 2 ]

3 голосов
/ 08 мая 2011

Вы можете сделать это с помощью плагина jquery oembed:

http://code.google.com/p/jquery-oembed/

Надеюсь, это поможет. Приветствия

0 голосов
/ 26 ноября 2015

Если вам нужен простой пример JS без использования внешней библиотеки (это для Facebook, но та же концепция может быть реализована для других провайдеров).

$().ready(function() {
  $('.facebookLink').each(function() {
    var container = $(this);
    var url = jQuery.trim(container.text());
    container.text("");
    if (url) {
      $.ajax({
        url: "https://apps.facebook.com/plugins/post/oembed.json/",
        data: {
          "url": url
        },
        dataType: "jsonp",
        async: false,
        success: function(data) {
          container.html(data.html);
        }
      });
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="facebookLink">https://www.facebook.com/FacebookDevelopers/posts/10152128760693553</div>

Вы можете ознакомиться с документацией здесь ..

https://developers.facebook.com/docs/plugins/oembed-endpoints

Примечание. Для правильной работы этого API с вызовами ajax на мобильных устройствах; Вам нужно использовать домен конечной точки "apps.facebook.com" вместо "www.facebook.com":

https://apps.facebook.com/plugins/post/oembed.json/?url={content-url}

Это связано с тем, что если вы используете конечную точку, указанную в официальной документации "www.facebook.com", пользовательский агент мобильных устройств принудительно перенаправит на "m.facebook.com", который не имеет этой конечной точки реализован.

...