How can I get the title of a webpage given the url (an external url) using JQuery/JS

Question

I am a newbie, so excuse me if this is a silly question ..

So what I was trying is to get the title of a URL using JQuery/JS. I dont want to load the content of the url and then parse tags in it.

Let me be more clear, I have a set of urls, say 20 for which I want to display the titles .. the urls i am referring to are not the current urls, so I cant use js document.title ..

so i want to do something of the form SOMEFUNC.title(URL) and get its title. Is there any such function?

What do you mean by `title of a URL`? The title of a HTML document stored at that location? — StuperUser, Oct 26 '11 at 11:06
@StuperUser as i said, its not for the 'current' url or the page that is being visited now .. i have a set of urls .. for which i need the title .. lets say i have news.google.com, news.bbc.com, yahoo.co.uk, etc. .. now i want the titles of these pages .. — user1014390, Oct 26 '11 at 11:11
yes .. so for example for google.co.uk its should be Google - UK .. — user1014390, Oct 26 '11 at 11:13
The reason I make the clarification is because as you say: `i have a set of urls .. for which i need the title`; URLs don't have titles, HTML documents do. There's no library function to get the title of a document by URL, as you say, you'll have to get the documents then find the title of them. — StuperUser, Oct 26 '11 at 11:24
Note though, from: http://api.jquery.com/jQuery.get/ `"Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol."` — StuperUser, Oct 26 '11 at 11:25

score 21 · Answer 1 · edited Dec 20 '17 at 21:35

21

Something like this should work:

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

TheSuperTramp is correct, above will not work if externalUrl is outside of your domain. Instead create this php file 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));

then in 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);
    }
  });
}

edited Dec 20 '17 at 21:35

Popnoodles

28,090
2
45
53

answered Oct 26 '11 at 11:15

uncreative

1,436
9
14

This could work. An alternative is to write a php-script that does this regex. – OptimusCrime Oct 26 '11 at 11:23
4

This may not work, the browser may not allow to call external urls through XMLHttpRequest. http://www.w3.org/TR/XMLHttpRequest/ – Jishnu A P Oct 26 '11 at 11:29
this wont work for external urls .. as @OptimusCrime said, i will try using php and parsing that – user1014390 Oct 26 '11 at 11:33
Ah, @user1014390, you're right. Call a local file, parse the url in GET (or POST, does not matter). A simple php-script will do. I think there are plenty php-examples of this already :) – OptimusCrime Oct 26 '11 at 11:35
yeah .. but my main concern was regarding the number of such requests .. so i have around 20 urls .. so doing it at the server side takes a long time !! – user1014390 Oct 26 '11 at 11:40
Regex parsing HTML, eh? – Matt Fletcher Nov 30 '17 at 16:29

score 11 · Accepted Answer · edited Jul 01 '12 at 19:25

11

You can also get the title of any webpage using this API

http://textance.herokuapp.com/title/

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

edited Jul 01 '12 at 19:25

Griwes

8,805
2
43
70

answered Jul 01 '12 at 14:39

Durgesh

406
4
8

1

is this a plugin that we can run ourselves? – Nearpoint Jul 09 '14 at 05:00
No, its not a plugin. Its just a service which uses nodejs and jsdom in background to get the title. – Durgesh Jul 16 '14 at 16:18
10

When I try to use this I get XMLHttpRequest cannot load http://textance.herokuapp.com/title/http://fortawesome.github.io/Font-Awesome/icons/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. – Nearpoint Sep 24 '14 at 06:06
This API only works for URLs with no '/'s. Like works www.google.com and does not work for https://drive.google.com/drive/my-drive – Shameel Mohamed May 24 '17 at 05:09
1

Sorry mistaken! You can use this with long URLs also. Clip off the https:// and replace '/' with '%2F'. This works! – Shameel Mohamed May 24 '17 at 05:18
8

The API is down. – Noein Jan 20 '18 at 10:20
Still working for me. I'd suggest URL encoding your URL strings. – trlkly Jul 08 '18 at 18:22
5

No longer works. This is also a very externally dependent solution to the user's question. – jason Apr 29 '19 at 20:40
only trouble I'm having with this API is catching errors – April Polubiec Jun 07 '20 at 22:08

score 1 · Answer 3 · answered Oct 26 '11 at 12:26

Crossdomain request don't work with ajax, but what you could do is write a script on your server that fetch the title of a given site.

If you are using PHP you could use the file_get_contents and preg_match function to get the title. This guy here already provide the code for it.

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

Then in jQuery you could add this to an event or put it inside a function.

//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);
  }   
});

How can I get the title of a webpage given the url (an external url) using JQuery/JS

3 Answers3

Linked

Related