如何使用JQuery/JS获取外部URL的网页标题？

Question

如何使用JQuery/JS获取外部URL的网页标题？

javascriptjquerygettitle

23

我是一个新手，如果这个问题很傻，请原谅……

我的问题是，我想使用JQuery/JS获取网址的标题。我不想加载网址的内容，然后再解析其中的标签。

更明确地说，我有一组网址，比如20个，我想显示它们的标题…… 我所指的网址不是当前网址，所以我无法使用JS document.title ..

所以我想要做的事情是用类似 SOMEFUNC.title（URL）的形式来获取标题。是否有这样的功能？

- user1014390

“URL的标题”是什么意思？是指存储在该位置的HTML文档的标题吗？ - StuperUser

@StuperUser，就像我之前所说的那样，这不是针对“当前”的URL或正在访问的页面。我有一组URL，需要它们的标题。比如说，我有news.google.com、news.bbc.com、yahoo.co.uk等网址，现在我想要这些页面的标题。 - user1014390

是的，例如对于google.co.uk，应该是Google - 英国。 - user1014390

2

我进行澄清的原因是因为你所说的：“我有一组URL..需要它们的标题”; URL没有标题，HTML文档才有。没有库函数可以通过URL获取文档的标题，正如你所说，你必须获取文档，然后找到它们的标题。 - StuperUser

2

请注意，来自http://api.jquery.com/jQuery.get/的内容如下：“由于浏览器安全限制，大多数“Ajax”请求都受到同源策略的限制；该请求无法成功地从不同的域、子域或协议中检索数据。” - StuperUser

3个回答

11

你也可以使用这个API获取任何网页的标题。 http://textance.herokuapp.com/title/

$.ajax({
      url: "http://textance.herokuapp.com/title/www.bbc.co.uk",
      complete: function(data) {
        alert(data.responseText);
      }
});

- Durgesh

1

这是一个我们可以自己运行的插件吗？ - Nearpoint

10

当我尝试使用这个时，出现了XMLHttpRequest无法加载http://textance.herokuapp.com/title/http://fortawesome.github.io/Font-Awesome/icons/错误。请求的资源中没有'Access-Control-Allow-Origin'头部信息。因此，来自'http://localhost:3000'的访问被禁止。 - Nearpoint

1

抱歉，之前弄错了！你也可以使用长链接。只需剪切掉 "https://"并将 "/" 替换为 "%2F" 即可。这样应该就可以正常使用了！ - Shameel Mohamed

8

API崩溃了。 - Noein

5

不再工作了。这也是一个非常依赖外部因素的解决方案，以回答用户的问题。 - jason

显示剩余4条评论

1

跨域请求无法使用ajax进行工作，但您可以编写一个脚本在您的服务器上获取特定网站的标题。

如果您正在使用PHP，您可以使用file_get_contents和preg_match函数来获取标题。这位先生在这里已经提供了代码。

http://www.cafewebmaster.com/php-get-page-title-function

然后在jQuery中，您可以将此添加到事件中或将其放入函数中。

//For the purpose of this example let's use google
var url = "http://www.google.com";

$.ajax({
  type: "POST",
  url: "./getURLTitle.php",
  data: "{url: \"" + url + "\"}",
  success: function(data) {
     //do stuff here with the result
     alert(data);
  }   
});

- Eric B.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- uncreative · Accepted Answer

可以尝试以下代码：

$.ajax({
  url: externalUrl,
  async: true,
  success: function(data) {
    var matches = data.match(/<title>(.*?)<\/title>/);
    alert(matches[0]);
  }   
});

TheSuperTramp 是正确的，如果 externalUrl 不在您的域之内，则上面的代码将无效。相反，请创建此 php 文件 get_external_content.php：

<?php
function file_get_contents_curl($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}

$url = $_REQUEST["url"];
$html = file_get_contents_curl($url);

preg_match('/<title>(.+)<\/title>/',$html,$matches);
$title = $matches[1];

echo  json_encode(array("url" => $url, "title" => $title));

然后在 JavaScript 中：

function getTitle(externalUrl){
  var proxyurl = "http://localhost/get_external_content.php?url=" + externalUrl;
  $.ajax({
    url: proxyurl,
    async: true,
    success: function(response) {
      alert(response);
    },   
    error: function(e) {
      alert("error! " + e);
    }
  });
}