如何检测文本中的链接并使用 oembed/jquery 更改它(例如 Facebook、Twitter 等)

发布于 2024-11-05 09:20:21 字数 149 浏览 3 评论 0 原文

我希望用户能够复制并粘贴某些内容的链接,并使用 oembed 将其粘贴到文本框中。从这里我希望能够识别 url 并将其转换为 oembed 对象或任何您称之为的对象。 (例如 Youtube 页面=> URL=> textarea=> oembed=> 嵌入)

I want users to be able to copy and paste the link of something and, using oembed, paste it into a text box. From here I want to be able to identify the url and turn it into an oembed object or whatever you would call it. (e.x. Youtube Page=> URL=> textarea=> oembed=> embeded)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

黎夕旧梦 2024-11-12 09:20:21

您可以使用 jquery oembed 插件来完成此操作:

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

希望这有帮助。干杯

You can do it using the jquery oembed plugin:

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

Hope this helps. Cheers

小女人ら 2024-11-12 09:20:21

如果您想要一个不使用外部库的简单 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”。

If you want a simple JS example without the use of an external library (This is for Facebook, but the same concept can be implemented for other providers).

$().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>

You can checkout the documentation here..

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

Note: In order to make this API work properly with ajax calls on mobile devices; You need to use the endpoint domain "apps.facebook.com" instead of "www.facebook.com":

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

This is because if you use the endpoint that is provided in the official documentation "www.facebook.com" the User agent of the mobile devices will force the redirect to "m.facebook.com" which does not have this endpoint implemented.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文