How to use javascript to get information from the content of another page (same domain)?

Let's say I have a web page (/index.html) that contains the following

<li>
    <div>item1</div>
    <a href="/details/item1.html">details</a>
</li>

and I would like to have some javascript on /index.html to load that /details/item1.html page and extract some information from that page. The page /details/item1.html might contain things like

<div id="some_id">
    <a href="/images/item1_picture.png">picture</a>
    <a href="/images/item1_map.png">map</a>
</div>

My task is to write a greasemonkey script, so changing anything serverside is not an option.

To summarize, javascript is running on /index.html and I would like to have the javascript code to add some information on /index.html extracted from both /index.html and /details/item1.html. My question is how to fetch information fr开发者_如何学Goom /details/item1.html.

I currently have written code to extract the link (e.g. /details/item1.html) and pass this on to a method that should extract the wanted information (at first just .innerHTML from the some_id div is ok, I can process futher later).

The following is my current attempt, but it does not work. Any suggestions?

function get_information(link)
{
    var obj = document.createElement('object');
    obj.data = link;
    document.getElementsByTagName('body')[0].appendChild(obj)
    var some_id = document.getElementById('some_id');
    if (! some_id) {
        alert("some_id == NULL");
        return "";
    }
    return some_id.innerHTML;
}

First:

function get_information(link, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", link, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            callback(xhr.responseText);
        }
    };
    xhr.send(null);
}

then

get_information("/details/item1.html", function(text) {
    var div = document.createElement("div");
    div.innerHTML = text;
    // Do something with the div here, like inserting it into the page
});

I have not tested any of this - off the top of my head. YMMV

As only one page exists in the client (browser) at a time and all other (virtual/possible) pages are on the server, how will you get information from another page using JavaScript as you will have to interact with the server at some point to retrieve the second page?

If you can, integrate some AJAX-request to load the second page (and parse it), but if that's not an option, I'd say you'll have to load all pages that you want to extract information from at the same time, hide the bits you don't want to show (in hidden DIVs?) and then get your index (or whoever controls the view) to retrieve the needed information from there ... even though that sounds pretty creepy ;)

You can load the page in a hidden iframe and use normal DOM manipulation to extract the results, or get the text of the page via AJAX, grab the part between <body...>...</body>¨ and temporarily inject it into a div. (The second might fail for some exotic elements like ins.) I would expect Greasemonkey to have more powerful functions than normal Javascript for stuff like that, though - it might be worth to thumb through the documentation.