1

I am trying to create a website that I can store on my local machine and access from that computers internet browser. On this website I want to have elements from several other websites embedded on it. I have been able to embed entire web sites, but not specific elements.

How do I embed just specific elements from a website, and what do I need to do so?

The website in question is http://xkcd.com, I want to embed the comic of the day and that comics title, I think they are in elements <div id "comic"> and <div id "ctitle"> respectively.

William
  • 2,695
  • 1
  • 21
  • 33
Jesse McDonald
  • 159
  • 1
  • 10
  • Hi! I recommend reading some [basic HTML tutorials](http://www.w3schools.com/html/html_basic.asp). As for your specific question, you can right-click the image you want and select "Copy image address" and then just paste that inside a `` tag like this: `` – William Jan 06 '16 at 19:13
  • 1
    Oh, wait, you mean loading the comic of the day, not a specific comic. Maybe this will help then: http://stackoverflow.com/questions/3272071/iframe-to-only-show-a-certain-part-of-the-page – William Jan 06 '16 at 19:18

2 Answers2

2

I believe what you are looking for is an iframe, you can learn all about that here: http://www.w3schools.com/tags/tag_iframe.asp

The code below should be what you need, I added a reference to the id of the element of the page that contains the comic to the URL (i.e: 'https://www.xkcd.com/#comic') so that the iframe would only display the picture, rather than the whole page.

<iframe scrolling="no" height="380" src="https://www.xkcd.com/#comic"></iframe>
Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
tinthetub
  • 2,120
  • 1
  • 14
  • 22
  • 2 questions, will this work for a comic of any size, and can you get the comic title too? – Jesse McDonald Jan 08 '16 at 06:53
  • @JesseMcDonald If you want to include the comic title, you could do the same and make another iframe but rather than referencing the `#comic` you'd reference the title's id, which appears to be named `#ctitle`. Usually, I'd recommend retrieving all the pics and their names and displaying them accordingly, which could be done with a bit of programming (that way you won't have to worry about size), but unfortunately, the owner of that website appears to have restricted access to the folder that contains the comics, you can see that here: https://imgs.xkcd.com/comics/, that link returns a 404. – tinthetub Jan 08 '16 at 21:14
2

EDIT: I should note, this code no longer works, the allorigins.me site is now defunct and no longer forwards get requests

This code Snippet does exactly what I wanted it to

<h1 id="xkcd"></h1>

<script>

  function callback(data) {

    let comicPattern = new RegExp('<div id="comic">[^]*?<\/div>', 'gm');
    console.log(comicPattern);
    let comic = data.contents;
    console.log(comic);
    let newComic = comic.match(comicPattern);
    console.log(newComic);
    let filePattern = new RegExp('\/\/', 'g');
    let httpPattern = 'http://';
    let newComicFiltered = newComic[0].replace(filePattern, httpPattern);
    console.log(newComicFiltered);
    document.querySelector('#xkcd').innerHTML = newComicFiltered;
    
  }

</script>

<script type="text/javascript" src="http://allorigins.me/get?url=https%3A//xkcd.com&callback=callback"></script>
Jesse McDonald
  • 159
  • 1
  • 10