js: Load html of a page from a different domain

Question

I was wondering how can I load HTML, which is hosted on a different domain?

I am using JavaScript, and want to create a bookmarklet that will enable me to parse the

Answer 1

If you don't own the other page, it'll be very difficult.

In fact, you can't make a request to another domain in javascript. The only thing you can do is load a script from another domain:

<script type="text/javascript" src="http://otherdomain.com/script.js"></script>

If the purpose of this is to load data from the other domain, and (as I said) you own the other site, you can create the script.js file, which will load the data you need in your original site.

Remember this is a delicate thing, and should be done only if you know what there will be in the script.

Answer 2

You can make cross-domain requests from localhost, but if you plan to deploy this code to a server, it's not going to work. Since you are developing a bookmarklet, I think you can do this.

You'll need to use AJAX to get the remote HTML.

The jQuery library makes this task as simple as this...

$.get("http://www.google.com", function(html) { alert(html); });

Answer 3

JavaScript isn't allowed to make cross-domain requests. It's a big security risk. Instead, you'll have to execute a script on the server and have it return the results to your JavaScript function.

For example, assuming that you're using JavaScript and PHP you could setup the application to work like this:

JavaScript initiates an Ajax request to a page (or script) located on your server. It passes any required parameters to this page. The following code is based on jQuery (for the sake of being concise), but the principles are the same regardless of your framework.

var sParameters = " ... " // this is defined by you
$.ajax({
  url: 'your-server-side-code.php',
  processData: false,
  data: sParameters,
  success: function(sResponse) {
    // handle the response data however you want
  }
});

The server-side code will respond to the request and pass along the necessary parameters to the cross-domain website. PHP's cURL library is good for this.

// very contrivuted cURL configuration for purposes of example...
$curl_connection = curl_init();
$str_url = "http://you-url.com";
curl_setopt($curl_connection, CURLOPT_URL, $str_url);
curl_setopt($curl_connection, CURLOPT_GET, 1);
// ... keep setting your options ...
$str_response = curl_exec($curl_connection);
curl_close($curl_connection);

When the cross-domain website responds, your server-side code can echo the response back to the initial request. This should probably be validated before responding back, but it's just an example.

print_r($str_response);

A JavaScript response handler function can then parse the incoming response data. Note the success function in the first block of JavaScript code above.