0

I am trying to write an html file where I have a URL link and the like name is the title of the link itself.

In order to do so, I follow the answer proposed in the second answer of the following post: How can I get the title of a webpage given the url (an external url) using JQuery/JS

<!DOCTYPE html>
<html>
    <head>
        <script>
        function getTitle(externalUrl){
          var proxyurl = "./get_external_content.php?url=" + externalUrl;
          $.ajax({
            url: proxyurl,
            async: true,
            success: function(response) {
              alert(response);
            },   
            error: function(e) {
              alert("error! " + e);
            }
          });
        }
        </script>
    </head>
<body>

<!-- Link to news -->
<a href="https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml">Notizia Corriere</a>.


getTitle("https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml")

The PHP file instead is this:

<?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));

I have to say that I am not sure weather I am calling the .php function correctly and the same for the getTitle function. To many of you this may be a basic question but I have no html/php experience and I cannot get around this issue. Would you be able to lead me to the correct way to tackle this issue?

Federico Gentile
  • 5,650
  • 10
  • 47
  • 102

1 Answers1

0

Code works well, though improvements can be made. Make sure you've included the jquery CDN scripts. Make sure you're calling getTitle within <script></script> tag. Make sure path to php script is valid. As pointed earlier, hitting F12 in your browser -> Network tab can help you diagnose request/response issues.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>
        function getTitle(externalUrl){
          var proxyurl = "./get_external_content.php?url=" + externalUrl;
          $.ajax({
            url: proxyurl,
            async: true,
            success: function(response) {
              alert(response.title);
            },   
            error: function(e) {
              alert("error! " + e);
            }
          });
        }
        getTitle("https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml");
        </script>
    </head>
<body>

For better result you need to specify the JSON content type in PHP response:

<?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];

header('Content-Type: application/json', true);
echo  json_encode(array("url" => $url, "title" => $title));
user8555937
  • 2,161
  • 1
  • 14
  • 39
  • Unfortunately as I try to run it I get the following error: `jquery-3.4.1.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/A063772/Desktop/Projects/HTML_Page/Scripts/get_external_content.php?url=https://www.corriere.it/economia/tasse/cards/irpef-2020-come-cambiano-scaglioni-studio-riforma-aliquote/mosse-governo_principale.shtml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.` What does this mean then? – Federico Gentile Jan 15 '20 at 11:58
  • You need to be in a server environment to perform the operation. Install XAMP, copy the files to the public folder, then access them in browser via http://localhost/file.htm Note that setup may vary. – user8555937 Jan 15 '20 at 12:14