Question

假设我有一个包含以下内容的网页（/index.html）

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

我想在/index.html上加一些javascript来加载它 /details/item1.html页面并从该页面中提取一些信息。页面/details/item1.html可能包含

之类的内容

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

我的任务是编写一个greasemonkey脚本，因此不能选择更改任何服务器端。

总结一下，javascript正在/index.html上运行，我愿意喜欢使用javascript代码在/index.html上添加一些信息从/index.html和/details/item1.html中提取。我的问题是如何从/details/item1.html获取信息。

我目前已编写代码来提取链接（例如/details/item1.html）并将此传递给应该提取所需信息的方法（首先来自some_id div的.innerHTML是好的，我可以稍后再处理。）

以下是我目前的尝试，但它不起作用。有什么建议吗？

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;
}

Answer 1

首先：

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);
}

然后

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
});

我还没有测试过这个问题 - 我的头顶。 YMMV

Answer 2

由于客户端（浏览器）中一次只存在一个页面，而所有其他（虚拟/可能）页面都在服务器上，因此您将如何使用JavaScript从另一个页面获取信息，因为您必须与服务器进行交互在某些时候检索第二页？

如果可以，请集成一些AJAX请求以加载第二页（并解析它），但如果这不是一个选项，我会说你必须加载所有页面你想同时从中提取信息，隐藏你不想显示的位（在隐藏的DIV中？）然后让你的index（或任何控制视图的人）从那里检索所需的信息......即使这听起来很令人毛骨悚然;）

Answer 3

您可以在隐藏的iframe中加载页面并使用常规DOM操作来提取结果，或通过AJAX获取页面文本，抓取<body...>...</body>¨之间的部分并暂时将其注入div。（对于像ins这样的一些奇特元素，第二种可能会失败。）我希望Greasemonkey能够拥有比普通Javascript更强大的功能，不过这样的东西 - 可能值得翻阅文档。

如何使用javascript从另一个页面（同一个域）的内容中获取信息？

3 个答案: