Question

我发现这篇文章https://www.ajaxtown.com/article/facebook-type-link-preview展示了如何获得易于理解和适应的链接预览。

然而，当我尝试在我的服务器上运行它时，我会从提供的脚本中回复并且响应被扰乱，就像网站上的演示一样，所有hunky dory都可以工作。

我知道跨网站脚本编写不是没有，但是有人如何访问网站并搜索数据以执行链接预览等操作。

Answer 1

请参阅以下链接，了解使用jQuery的链接预览

http://embedly.github.io/jquery-preview/demo/

以下是脚本部分

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.embedly-3.0.5.min.js" type="text/javascript"></script>
  <script src="http://cdn.embed.ly/jquery.preview-0.3.2.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
</head>

接下来设置一个允许用户输入链接的简单表单：

<form action="/update" method="POST">
    <input id="url" type="text" name="url"/>

    <!-- Placeholder that tells Preview where to put the selector-->
    <div class="selector-wrapper"></div>
</form>

然后，您需要告诉预览要收听的字段：

<script>
    // Set up preview.
    $('#url').preview({key:'your_embedly_key'})// Sign up for a key: http://embed.ly/pricing
    .on('loading', function () {
        $(this).prop('disabled', true);
        $('form .button').html('<i class="icon-spinner icon-spin"></i>');
    }).on('loaded', function () {
        $(this).prop('disabled', false);
        $('form .button').text('Share');
    })
</script>

Answer 2

如果您有服务器，最好使用服务器支持的任何语言的本地代理。可以在AJAX Cross Origin

找到此类解决方案的良好示例

Answer 3

虽然为时已晚，但对于未来的访客，我发布了此信息。它简单而完全独立。请访问此链接https://github.com/mahfuzak08/url2preview

链接预览URL PHP / jQuery

3 个答案: