2016-04-28 45 views
0

我發現這篇文章https://www.ajaxtown.com/article/facebook-type-link-preview其中演示瞭如何獲得一個鏈接預覽,我發現很容易理解和適應。鏈接預覽的URL PHP/jQuery

但是,當我嘗試在我的服務器上運行它時,我從提供的腳本中注意到,響應被加擾爲網站本身的演示,所有hunky dory作品。

我知道跨站點腳本是一個不錯的但是如何訪問一個網站和刮回數據做一些事情,如鏈接預覽。

回答

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> 

然後你需要告訴預覽wh在現場聽:

<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> 
0

如果你有一個服務器,你最好使用本地代理服務器支持的任何語言。這樣的解決方案的好例子可以在AJAX Cross Origin