Show div from another website

Question

Is there a way to use an iframe or some other method of showing a named div from another website?

I want to pull in some data from a government website into a google map and when they click the point I want the information from one of the divs on that page to display.

Answer 1

You would have to make use of either JSONP or a middle-agent to retrieve the data (i.e. a PHP script using the CURL library).

JSONP functionality is included in numerous Javascript libraries such as MooTools and jQuery. That is the method I would use.

MooTools: http://mootools.net/docs/more/Request/Request.JSONP

jQuery: http://docs.jquery.com/Release:jQuery_1.2/Ajax

Once you have retrieved the body of the page the DIV resides on, you could use REGEX to extract the information from the specific DIV element.

Answer 2

I take assumption that you are sure of div's ID in that other website.

If yes. use Jquery Ajax to pull the site's content into a hidden iframe in your site. then fetch the content of the div-in-question into some variable and then you can use it for your purpose (parse html table data or do whatever)

Discard the iframe's content so that you don't have unnecessary items in your page's DOM.

Answer 3

1. Ajax Call
2. In-House Service to Scrape the HTML from the page
3. Select the div with xpath / SGML parser
4. Return to ajax call-handler
5. Replace the content of your div

However There are other problems, i.e. scraping someone's site for their content without their permission is BAD.

They may or may not care, but still you should seek permission, or one day you could find your webserver blacklisted from their site. Or worse... Especially a government site.

You should probably go about figuring out how to properly obtain the data you need (perhaps there's an api somewhere) and then render your own version.

Answer 4

Using JQuery you should be able to exactly that with the load-function. Here is a small example to get a container with id "container" on a page called Test.html:

$('#contentDiv').load('/Test.hmtl #container');

You can visit the JQuery documentation here for more info