For my Greasemonkey-like script, I have loaded an https page on Amazon.co.uk and I wish to display the price of an item on a linked page.
I tried to use an iFrame to display the window:
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"
} );
}
The problem with this approach is, that whilst it sometimes works, the contents of the iFrame are too cluttered, so I cannot see what I need to, at a glance.
Let us suppose that the linked page is https://www.amazon.co.uk/gp/product/B001AM72BM/
The relevant HTML snippet from the aforementioned page:
<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">
How, exactly, can I parse the iFrame so that only the price is shown? (or, if not that, a very small portion of the page)
The key info that I want to display, in this example, is £2.85
This is for Greasekit on Fluid.app (which is very old, but I must use it). You probably don’t even need to know that as it’s very similar to Greasekit. So, for the purposes of this question, you can just pretend it is.
Both the source page and the iFramed page are https://amazon.co.uk * . I cannot link to it as it would require me, specifically, to login.
If you want, you can visit a mirror of the page on dropbox. Obviously stuff might not work in this mirror because of the same-origin policy.
Provided that the iframe is same-domain (which seems to be true in your case), then you parse the iframe by waiting for it to load and then using jQuery to search and manipulate its contents,
Here we want to find the <b class="priceLarge">£2.85</b>
node and remove everything else.
The code to do all that is:
$("#gmIframe").load ( function () {
var ifrmJQ = $("#gmIframe").contents ();
var targNode = ifrmJQ.find (".priceLarge");
var ifrmBody = ifrmJQ.find ("body");
ifrmBody.empty ();
ifrmBody.append (targNode);
} );
You would place this code block right after the $("body").append ('<iframe
line, from your code, in the question.