[jQuery] Load website into DIV

Question

Hi, how do i actually retrieve data from a website when i write the URL in a textbox and then hit the submit button. I want the data to be put in an div that i have. Is this possible?

I have tried with this, but it doesn't work!

<script type="text/javascript"> 
function contentDisp()
{
var url = $("#text").val();
$("#contentArea").load(url);
}
</script> 



<textarea id="text">Write URL here</textarea>
<br />
<input type="button" value="Click" onClick="contentDisp();">

<div id="contentArea"></div>

Answer 1

Due to the sandbox on javascript calls, you can't do this (you can't call outside the domain the JS was loaded from), at least not directly

There are 2 methods around this.

The first would be to load the requested url in an iframe rather than a div by setting the src parameter using JS. Simple, easy but would limit your access to the data in the iframe.

The second would be to make an AJAX request on your server and your server then looks up the URL and returns the HTML content (pretty easy to do with CURL or similar). This lets you play around with the returned content a bit more, but again due to the sandbox on cookies you won't be able to request anything like a users facebook page or anything that requires a session as it would be working through the servers session and not the browser session.

Answer 2

Is the URL on the same domain as the page itself? For security reasons most browsers will not allow cross site AJAX requests. For more info on why see link text

Answer 3

Given that it will not be capable of doing logins or http authentications (for enabling that you can use curl or another http client), this php one liner can be used as a proxy to load content from other sites

/* proxy.php */
<?php echo file_get_contents($_GET['url']);?>

than, assuming that you place proxy.php in the same directory of the html page:

$("#contentArea").load('proxy.php?url=http://example.com');

Answer 4

It's right, the browsers not allow AJAX request to others domain sites, I had the same problem and did the workmad3's tip, something like this:

$(document).ready(function(){
     $('#url').change(function(){
          var _url=$(this).val();
          $('#webDisplay').attr('src',_url);
     });
});

where my url ID is a INPUT text, very nice trick