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

Using GM xmlhttpRequest instead of an iframe to display pertinent info from an external page

本文关键字：信息 外部 显示 GM-xmlhttpRequest 使用 iframe      更新时间：2023-10-13

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

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

我尝试使用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片段：

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

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

因此：

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

完整的代码，包括一些UI和错误处理，看起来是这样的。我在你的样本页上测试了它，它有效。

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 + '"');
}
相关文章：