Get title of page with link

Question

I have a link in a texbox. When I click a button I want to take the title of the page of the link. How can do it with javascript or jQuery?

The title of the page that the link references, or the title of the page containing the link? (One is easy, the other is not.) — Pointy, Oct 10 '12 at 13:26

score 1 · Accepted Answer · answered Oct 10 '12 at 13:28

1

this post can give you a start

http://forum.jquery.com/topic/get-external-page-and-fetch-title-googled-a-lot-didn-t-find-any-solution

answered Oct 10 '12 at 13:28

rahul

7,573
7
39
53

score 0 · Answer 2 · answered Oct 10 '12 at 13:28

0

If the page is in the same domain, I'd say use an ajax request and get the title from the returned DOM object.

If it's a different domain, I'd say set a hidden IFrame to the location and when it's loaded get the title using something like:

document.getElementById('MyIframe').document.title

answered Oct 10 '12 at 13:28

Rob Hardy

1,821
15
15

I can't because not in the same domain and page doesn't allowed to loan in an iframe. – Erdinç Özdemir Oct 10 '12 at 13:33

score 0 · Answer 3 · answered Oct 10 '12 at 13:30

0

It is almost always done by backend script/crawler. It fetches webpage for You on server-side and returns parsed data by AJAX

answered Oct 10 '12 at 13:30

yakxxx

2,841
2
21
22

score 0 · Answer 4 · answered Oct 10 '12 at 13:44

try something like this

<a href="http://www.google.com" id="googleLink">Google</a>
<span id="titleGoesHere"></span>

--

$(document).ready( function() {
    $('#googleLink').click(function(){
        $.get(this.prop('href'), function(data) {
            var $temp = $('<div id="tempData" />');
            $temp.append(data);
            var title = $('title', $temp);
            $('#titleGoesHere').html(title.val());
        });
    });
});

score 0 · Answer 5 · answered Jul 16 '18 at 09:00

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. And because we are using client-side Javascript on the front end for web scraping, CORS errors can occur.

...

Staying firmly within our front end script, we can use cross-domain tools such as Any Origin, Whatever Origin, All Origins, crossorigin and probably a lot more. I have found that you often need to test a few of these to find the one that will work on the site you are trying to scrape.

From this post, I wrote this working and self-contained fiddle:

function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

const url = "https://www.facebook.com/"

$.getJSON('https://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?', function(data){
    const content = replaceAll(data.contents, "<script", "<meta");
    $("#content").append(content);
    const d = $("#content");
    $('#title').text(d.find('title').text());
  $('#description').text(d.find('meta[name=description]').attr("content") || "None");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content" style="display: none;">
</div>

<h3 id="title">Waiting...</h3>

<br/>

<p id="description">Waiting...</p>

A few comments:

Use a cross-domain tool through https
Don't forget to encodeURIComponent your url
I replaced script tags with meta tags so that none of those are executed when appended to the DOM (replace function from this question)
To be used, parsed jQuery must be added to the dom (see this question)

Get title of page with link

5 Answers5