locked
How to import text and pictures from web?

    Question

  • I'm working on a little program but I need some help. I want to import text and a Picture from a specific site (like http://cyclingquotes.com/news/x-ray_confirms_scaphoid_fracture/) but the question is just how to do it. I'm still new and I'm using HTML, CSS and Javascript.

    I want the program to load the text for the article, and put it into my program. Also a Picture would be cool (if there is any in the article). I don't want it to be just this article but more like every article that will come out, so I can't just type it in manually.

    To be specific: I want a function that loads text (from the web) and write it into my page, when the page (my page) loads.

    Monday, February 4, 2013 3:52 PM

Answers

  • Have you already tried something? 

    To make a request, you could use : 

    WinJS.xhr({
        url : 'http://cyclingquotes.com/news/'
    }).then(function(result) { ... })

    This will dowload the content of the page. Then you can parse it and find each single article. Here is what the HTML looks like, it's easy to retrieve a list with each url :

    <div class="list_news_items" style="width:600px;">
        <h2 style="margin-bottom:10px;">NEWS ARCHIVE</h2>
        <a class="text" href="http://cyclingquotes.com/news/xxx/">BMC wins Qatar Team Time Trial <img src="http://www.feltet.dk/octo_cms/CyclingQuotes/gfx/newsLink_white.png"><span style="float:right;">04.02.2013 @ 15:49</span></a>
        <a class="text" href="http://cyclingquotes.com/news/x-ray_confirms_scaphoid_fracture/">X-ray confirms scaphoid fracture <img src="http://www.feltet.dk/octo_cms/CyclingQuotes/gfx/newsLink_white.png"><span style="float:right;">04.02.2013 @ 14:24</span></a>
        <a class="text" href="http://cyclingquotes.com/news/johnny_hoogerland_hit_by_car_and_diagnosed_with_rib_fractures/">Johnny Hoogerland hit by car and diagnosed with rib fractures <img src="http://www.feltet.dk/octo_cms/CyclingQuotes/gfx/newsLink_white.png"><span style="float:right;">04.02.2013 @ 11:58</span></a>
    
        <!-- And so on... -->
    </div>

    Then you'll have to do the same for each article :

    - Send an XmlHttpRequest with WinJS.xhr()

    - Parse the content

    And finally you'll be able to insert it into one of your page. To insert something into the DOM of your page, you could use WinJS.Utilities.setInnerHTMLUnsafe (http://msdn.microsoft.com/en-us/library/windows/apps/br211696.aspx). By default, you can't use the properties innerHtml on an objet of your DOM to prevent unwanted HTML code-injection in your app.

    I hope this help and will get you started :)

    Best regards, 

    Renaud



    http://www.renauddumont.be

    • Marked as answer by Potices Tuesday, February 5, 2013 2:38 PM
    Monday, February 4, 2013 9:55 PM