Embedding part of a web site

Question

Suppose I want to embed the latest comic strip of one of my favorite webcomics into my site as a kind of promotion for it. The webcomic has the strip inside of a div with an id, so I figured I can just embed the div in my site, except that I couldn't find any code examples for how to do it (they all show how to embed flash or a whole website). Can someone please show me (or tell) how it's done?

PS I'd rather not use server side scripting or external services (which is what is often recommended for embedding RSS).

Solution 1

Update - Cross domain request with jQuery (on client side)

Yesterday I was browsing James Padolsey's blog, where he posted a great article, on how to do cross domain request with jQuery, also Chris Heilmann has a nice DEMO.

The principle is to use YQL -> a yahoo api for web page queries, where you receive a JSON with all the html. Happy scraping :)

Scrape remote data with php, load with jQuery

What about considering simple AJAX call, that would intercept the comic element and update with its contents your <div id="update-comic" /> primarily used for this purpose?

Also you will use a simple php to get the remote page, cause you cannot make ajax call on another domain

note: user must have JavaScript enabled, also following code uses jQuery library

Putting it all together

1. on your page, where you want to display remote comic strip create a div only for this purpose, lets call it update-comic

   <div id="update-comic">
       <!-- here comes scraped content -->
   </div>
   

2. write down the php, call it comic-scrape.php, it will download the html from remote page, you should consider caching the response and updating it on a specified interval (e.g. 30min, 1hr, your call.. :))

   server performance should not suffer after simple cache checking implementation

   <?php
       $url = 'http://www.example.com/';
       $response = file_get_contents($url);
       echo $response;
   

3. now comes the jQuery magic, where you make ajax call on your php scraper and take only the relevant element you are interested in. Place this script inside your view page (where you have your <div id="update-comic" />

   <script type="text/javascript">
   $(function () {
       // set all your required variables
       var 
           localUrl = '/comic-scrape.php',
           elementId = '#remote-comic-id',
           elementToUpdate = $('#update-comic');
   
           // update the local elementToUpdate with elementId contents
           // from your php in localUrl
   
           elementToUpdate.load(localUrl + ' ' + elementId;
   });
   </script>
   

I hope, I covered everything.

Employing simplexml and xpath

As philfreo suggested in comment, a viable solution could also contain selecting the required id server-side. It is very easy with use of php's simplexml and a little xpath:

<?php

    // set remote url and div id to be found
    $elementId = 'remote-comic-id';
    $url = 'http://www.example.com/';

    // instantiate simple xml element and populate from $url
    $xml = new SimpleXMLElement($url, null, true);
    
    // find required div by id
    $result = $xml->xpath("//div[id={$elementId}]");
    
    // take first element from array, which is our desired div
    $div = array_pop($result);

    echo $div;

Solution 2

It's impossible because you cannot manipulate iframe/frame content. Using iframe tag will just modify content in tag, but not the src. Neither with AJAX, because you have to be on the same domain.

So, for example, you can use PHP with cURL or quite simply with fopen.