How to get HTML from external contents with Jquery?

Question

I have successfully achieved the task of getting an internal webpage to show on my HTML, like I show bellow.

 <!doctype html>
 <html>
   <head>
  <script type="text/javascript" src="jquery-1.4.4.js"></script> 
   </head>
   <body> 
  <div id="target">
   click here to see teste1.html
  </div>
  <div id="result">

  </div>
  <script type="text/javascript">
   $('#target').click(function() {
    $.get('teste1.html', function(data) {
     $('#result').html(data);
     alert('Load was performed.');
    });
   });
  </script>
   </body>
 </html>

The main goal is to get an external webpage, but this is not working:

 $.get('http://www.google.com/index.html', function(data) {
  $('#result').html(data);
  alert('Load was performed.');
 });

I need to get the HTML from an external webpage to read the tags and then output to Json.

Some clues on how to achieve this(load external webpages with Jquery, or should I do it with PHP)?

http://stackoverflow.com/questions/1292486/why-cant-i-load-an-external-resource-from-jquery-load-method — andres descalzo, Dec 28 '10 at 14:38

Pekka · Answer 1 · 2010-12-28T14:22:44.437

8

This can't be done easily with Javascript due to the Same Origin Policy.

If it's just about displaying an external page, you could load it into an <iframe>.

Otherwise, if possible, use a server side language like PHP to act as a proxy. Fetch the data using Ajax from the proxy script. Take care to prevent misuse (like others misusing the script to make arbitrary requests).

edited Dec 28 '10 at 14:22

answered Dec 28 '10 at 13:54

Pekka

442,112
142
972
1,088

Thanks for your reply! I will do it with PHP. Best Regards. – André Dec 28 '10 at 13:57
Isn't it **Same** Origin Policy ? – RobertPitt Dec 28 '10 at 14:22
@Robert yeah, changed. It's "Single" in some other context (MSDN?), I keep mixing them up – Pekka Dec 28 '10 at 14:22

score 3 · Answer 2 · answered Dec 28 '10 at 14:02

Will you can't do it directly from JavaScript you will have to write a server-side script as a proxy, here is an example for you:

<?php
$url = urldecode($_GET['url']);
$handle = fopen(url,'r');
while (!feof($handle))
{
   $str = fgets($handle, 4096);
   echo $str;
}
fclose($handle);
?>

You can send AJAX request to the this script from JavaScript along with the URL of the site you want to get, remember to encode the URL before sending.

How to get HTML from external contents with Jquery?

2 Answers2