javascript - 如何从网站复制文本并在我自己的 HTML 文件中使用它

Question

我正在制作一个网站来查找航类价格。每次加载 HTML 文件时，我都必须从不属于我的另一个网站复制价格并将其插入到我的 HTML 文件中。

对方网站的源代码表明我要查找的标签是一个span标签，如<span class="amount price-amount">250</span>

所以问题是:如何复制或提取该信息并使用它或将其插入到我的 HTML 文件中？

我想使用 HTML、CSS、JavaScript 和/或 Bootstrap 来解决这个问题。

Answer 1

客户端网页抓取

您可以使用页面剥离来完成此操作。至少我是这么调用它的。一个基本的例子是:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {

    if (xhr.readyState === 4) {

        var doc = document.createElement('div');
        doc.innerHTML = xhr.responseText;
        var elems = doc.getElementsByTagName('*'),
        prices = [];

        for (var i = 0; i < elems.length; i += 1) {

            if ((elems[i].getAttribute('class')||'').indexOf('price-amount') > -1 && (elems[i].getAttribute('class')||'').indexOf('amount') > -1) {
                prices.push(elems[i].innerHTML);
            }

        }
    }
};
xhr.open('GET', 'airlinesite.com/path/to/page', true);
xhr.send();

这将从 airlinesite.com/path/to/page 获取 HTML。然后它将获得所有元素。循环遍历它们。如果它有一个类 amount 和 price-amount，它将把它的值存储在一个数组中。这些值将存储在prices中。

为此，目标域必须具有 CORS，它可能确实如此