Использование GM xmlhttpRequest вместо iframe для отображения соответствующей информации с внешней страницы

Question

Я загрузил https-страницу на Amazon.co.uk, и я хочу показать использование «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" 
}); 
} 

Проблема с этим подходом в том, что в то время как она работает, содержание плавающего фрейма слишком загромождено , поэтому я не могу понять, что мне нужно, с первого взгляда.

материал, который я хочу видеть

Предположим, что связанная страница 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

Это для 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, и в отличие от для фрейма, вам не нужно переписывать URL для SSL ,

Итак:

1. Вместо того, чтобы добавить IFRAME, добавить узел, который будет содержать свою цену.
2. Возьмите URL-адрес продукта, как и раньше.
3. Извлеките URL-адрес с помощью GM_xmlhttpRequest.
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 + '"'); 
}