3

How can you load a certain div of a webpage on another webpage that resides on a different domain.

I have tried this: 

<div id="m"></div>
<script>$('#m').load('http://something.com #divname');</script>

But it doesnt work when the page to load is on another domain

Kevin Ennis
  • 14,226
  • 2
  • 43
  • 44
sebas
  • 722
  • 1
  • 6
  • 21

2 Answers2

6

This mod for jQuery allows you to do just that. Check it out! It uses YQL to allow cross domain requests.

Once you get the request it appears as JSON which you can parse out through ajax. This is one way I have used it :

$.ajax({
    url: 'http://something.com',
    type: 'GET',
    success: function(res) {
        var loadIt = $j(res.responseText).find('#divname').html();
        $('#m').html(loadIt);
    }
});

But I think you can also simply do it using the .load as is shown on that link.

Lukasz Koziara
  • 4,274
  • 5
  • 32
  • 43
Zac
  • 12,637
  • 21
  • 74
  • 122
  • so basically by adding that plugin im going to be able to use the code i posted to accomplish the goal? or would i require another modification – sebas Dec 06 '11 at 03:14
  • Give it a go! Like the example on that link : `$('#container').load('http://google.com'); // SERIOUSLY!` – Zac Dec 06 '11 at 03:15
  • It didnt work, i added jquery.xdomainajax.js to the page then tried to use the code i posted, couldnt load an external page. – sebas Dec 06 '11 at 03:21
  • I did not answer your other question very well. You do have to parse it out of the json as well. Are you seeing the request made? You should see it attached to a query through yahoo and the response is one long JSON string of all of the html from the other site. Then you can grab whatever divs you want and pull them into your page. I updated my answer to try and make this a bit clearer for you. – Zac Dec 06 '11 at 03:30
  • Was going suggest YQL, nice way to do it in JS – Ryan Gibbons Dec 06 '11 at 03:37
  • @sebas, can you explain more your difficulties? Are you seeing a 5xx error as response? Are you using firebug? If so check the net tab to see what is being returned. – Zac Dec 06 '11 at 03:47
0

You need to use a technique called web scraping on your server side.

Almost all server side programming languages have a library to do this. If you are familiar with JavaScript you can use node.js. Once you have the div you require scraped and available, you can serve it to the client using Ajax which can also be done easily with node.js.

For more, look at this article.

eldarerathis
  • 35,455
  • 10
  • 90
  • 93
Samyak Bhuta
  • 1,256
  • 7
  • 20