jquery - 获取多个网址的网站标题/描述

Question

我正在尝试获取网站图标、网站标题和外部 URL 列表的描述，最好使用 jquery。我已经成功地为我的网址同步了谷歌的图标服务，任何人都可以阐明如何实现网站标题和描述吗？这是我到目前为止获得图标的内容。

HTML

<li><a href="http://dribbble.com/">Dribbble</a></li>
<li><a href="http://behance.net">Behance</a></li>
<li><a href="http://www.danwebb.net">Dan Webb</a></li>

JQUERY

$("a[href^='http']").each(function() {
$(this).prepend('<img src="https://www.google.com/s2/favicons? domain=' + this.href + '">');
});

Answer 1

• 您有多余的空间？域=。
• 此外，还可以使用 this.getAttribute("href") 或 jQuery 的 $(this).attr("href")
• 使用https!!!

$("a[href^='http']").each(function() {
   var href= this.getAttribute("href");
   $(this).prepend('<img src="https://www.google.com/s2/favicons?domain='+ href +'">';
});

<li><a href="https://dribbble.com/">Dribbble</a></li>
<li><a href="https://behance.net">Behance</a></li>
<li><a href="https://www.danwebb.net">Dan Webb</a></li>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

• 要获取标题:How can I get the title of a webpage given the url (an external url) using JQuery/JS

但是您肯定会遇到此错误:

...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

所以仅使用 JS 是不可能的。

<小时/>

PHP 来救援:

由于直接使用 AJAX 从不允许这样做的网站获取内容时存在 CORS 政策问题 - 您可以改为:

1. AJAX GET 您的服务器上的 PHP 脚本，用于获取外部站点
2. 现在内容位于您的域中，AJAX 将使用该内容进行响应。
3. 使用 JS (jQuery) 解析响应数据以获取所需的元素属性值或文本。

grabber.php

<?php
    echo file_get_contents($_GET["url"]);

index.html

<ul>
    <li><a href="https://dribbble.com/">Dribbble</a></li>
    <li><a href="https://behance.net">Behance</a></li>
    <li><a href="https://www.danwebb.net">Dan Webb</a></li>
</ul>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
    function grabber (url, el) {
      $.ajax({
        url: "grabber.php?url="+ url,
        type: "GET",
        success: function(data){
          // console.log( data ); 

          var $head  = $(data).find("head");
          var title = $head.find("title").text();
          var desc  = $head.find("meta[name='author']").attr("content");
          console.log(title , desc);
          $(el).append(" - "+ title +" - "+ desc);
        }
      });
    }

    $("a[href^='http']").each(function () {
      var href= this.getAttribute("href");
      $(this).prepend('<img src="https://www.google.com/s2/favicons?domain='+ href +'">';
      grabber( href , this ); // this represent the current loop el.
    });
<script>