使用 GM xmlhttpRequest 而不是 iframe 来显示来自外部页面的相关信息

Question

我在 Amazon.co.uk 上加载了一个 https 页面，我希望在链接页面上显示使用“GM xmlhttpRequest”来请求商品的价格。

到目前为止我一直在做什么

我tried to use an iFrame显示窗口：

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
var iframeSrc = prodLinks[0].href;
iframeSrc = iframeSrc.replace (/http:\/\//, "https://")
    $("body").append ('<iframe id="gmIframe" src="' + iframeSrc + '"></iframe>');


$("#gmIframe").css ( {
    "position":     "absolute",
    "bottom":       "1em",
    "left":         "2em",
    "height":       "25%",
    "width":        "84%",
    "z-index":      "17",
    "background":   "#00FF00"
} );
}

这种方法的问题是，虽然它有效，但 iFrame 的内容太杂乱，所以我无法一眼看出我需要什么。

我想看的东西

假设链接页面是https://www.amazon.co.uk/gp/product/B001AM72BM/

来自上述页面的相关 HTML sn-p：

<tr id="actualPriceRow">
<td id="actualPriceLabel" class="priceBlockLabelPrice">Price:</td>
<td id="actualPriceContent"><span id="actualPriceValue"><b class="priceLarge">£2.85</b></span>
<span id="actualPriceExtraMessaging">

究竟如何使用 GM xmlhttpRequest 来获取页面

背景：我正在使用类似于 GreaseMonkey 的东西

这是 Fluid.app 上的 Greasekit（它很旧，但我必须使用它）。您可能甚至不需要知道这一点，因为它与 Greasekit 非常相似。所以，就这个问题而言，你可以假装它是。

我的回答尝试

我会尝试：

GM_xmlhttpRequest({
method: "GET",
url: "https://www.amazon.co.uk/gp/product/B001AM72BM/",
onload : function(response) {
// do something with the result here
document.getElementByClass(‘priceLarge').innerHTML = response.responseText;
}
});

Answer 1

使用 jQuery 解析来自 GM_xmlhttpRequest 的响应，与 iframe 不同，您不需要将 URL 重写为 SSL。

所以：

1. 与其添加 iframe，不如添加一个包含您的价格的节点。
2. 像以前一样获取产品 URL。
3. 使用 GM_xmlhttpRequest 获取 URL。
4. 使用 jQuery 查找 .priceLarge 节点。
5. 将该节点的内容写入步骤 1 中创建的节点。

带有一些 UI 和错误处理的完整代码如下所示。我在your sample page 上对其进行了测试，它可以工作。

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
    //--- Make a place to put the price.
    $("td.buybox table td.v_prod_box_topleft").append (
        '<p id="gmPriceResult">Fetching...</p>'
    );

    GM_xmlhttpRequest ( {
        method:     'GET',
        url:        prodLinks[0].href,
        onload:     getItemPrice,
        onabort:    reportAJAX_Error,
        onerror:    reportAJAX_Error,
        ontimeout:  reportAJAX_Error
    } );
}

function getItemPrice (resp) {
    /*--- Strip <script> tags and unwanted images from response
        BEFORE parsing with jQuery.  Otherwise the scripts will run and the
        images will load -- wasting time and bandwidth and increasing risk
        of complications.
    */
    var respText    = resp.responseText.replace (/<script(?:.|\n|\r)+?<\/script>/gi, "");
    respText        = respText.replace (/<img[^>]+>/gi, "");
    var respDoc     = $(respText);

    //-- Now fetch the price node:
    var priceNode   = respDoc.find (".priceLarge:first");
    if (priceNode.length) {
        $("#gmPriceResult").text (priceNode.text () );
    }
    else {
        $("#gmPriceResult").text ("Price not found!");
    }
}

function reportAJAX_Error (resp) {
    alert ('Error ' + resp.status + '!  "' + resp.statusText + '"');
}