Question

Is there a way to parse html content using javascript?

I have a requirement to display only a div from some other site into my site. Is that possible? For example consider I want to show only div#leftcolumn of w3schools.com in my site. Is this even possible?

How can I do the same using javascript or jQuery?

Thanks.

Answer 1

You need to have a look at Same Origin Policy:

In computing, the same origin policy
is an important security concept for a
number of browser-side programming
languages, such as JavaScript. The
policy permits scripts running on
pages originating from the same site
to access each other’s methods and
properties with no specific
restrictions, but prevents access to
most methods and properties across
pages on different sites.

For you to be able to get data, it has to be:

Same protocol and host

You need to implement JSONP to workaround it.

---

Though on same protocol and host, jQuery has load() function which you would use like this:

$('#foo').load('somepage.html div#leftcolumn', function(){
  // loaded
}); 

---

Another possible solution (untested) would be to use server-side language and you don’t need jsonp. Here is an example with PHP.

1) Create a php page named ajax.php and put following code in it:

<?php
  $content = file_get_contents("http://w3schools.com");
  echo $content ? $content : '0'; 
?>

2) On some page, put this code:

$('#yourDiv').load('ajax.php div#leftcolumn', function(data){
    if (data !== '0') { /* loaded */ }
}); 

Make sure that:

• you specify correct path to ajax.php file
• you have allow_url_fopen turned on from php.ini.
• your replace yourDiv with id of element you want to put the received content in