Website part implementation

Question

Suppose I want to insert the latest comic strip of one of my favorite web comics into my site as a kind of promotion. Webcomic has a strip inside the div with id, so I decided that I could just insert the div on my site, except that I could not find code examples for how to do this (they all show how to embed flash or the whole site ) Can someone please show me (or tell) how this is done?

PS I would prefer not to use server-side scripts or external services (which is often recommended for embedding RSS).

Answer 1

Update - cross domain query with jQuery (client side)

Yesterday I was browsing James Padolsey's blog where he posted an excellent article on how to query cross-domain using jQuery, and also Chris Haleman has a nice DEMO .

The principle is to use YQL -> yahoo api for web page requests where you get JSON with all the html. Happy scrapers :)

Clear deleted data using php, upload using jQuery

What about considering a simple AJAX call that will intercept the comic element and update it with the contents that <div id="update-comic" /> uses for this purpose?

You can also use simple php to get the remote page, which is why you cannot make an ajax call in another domain

Note: the user must have JavaScript enabled, and the following code uses the jQuery library

Putting it all together

• on your page where you want to display the remote comic, create a div just for this purpose, call it update-comic

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

• write down php , name it comic-scrape.php , it will download html from the remote page, you should consider caching the response and update it at a certain interval (for example, 30 minutes, 1 hour, your call .. :))

  server performance should not suffer after a simple cache check implementation

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

• jQuery magic now appears, where you make an ajax call on your php scraper and take only the element you are interested in. Put this script in your view page (where you have <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.

Using simplexml and xpath

As suggested in the comments on Filfra, a viable solution may also include selecting the required server side id. This is very easy using php simplexml and a bit of 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; 

Answer 2

This is not possible because you cannot manipulate the contents of an iframe / frame. Using an iframe tag will just change the content in the tag, but not src. Not with AJAX, since you must be in the same domain.

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

Answer 3

You can just use iframe . The content is not literally on this page, but similar.

Here is an example: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe

It looks like this:

 <iframe src ="http://www.example.com/index.html" width="100%" height="300"></iframe> 

Answer 4

<embed src = "url of your comic book" width = "300" height = "250" />