使用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片段的东西：

<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 xmlhttp请求获取页面

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

这是Greasekit Fluid.app（这是非常古老的，但我必须使用它）。您可能甚至不需要知道它与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. 像以前一样抓取产品网址。
3. 使用GM_xmlhttpRequest获取URL。
4. 使用jQuery来查找.priceLarge节点。
5. 编写一个节点的内容在步骤1中

完整的代码创建的节点，一些用户界面和错误处理，看起来是这样的。我在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 + '"'); 
}