How can I parse an embedded iFrame to show only a snippet from the iframed page?

Question

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.

What I’ve been doing so far:

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.

What I want to be able to see instantly: £2.85

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

Background : I’m using something similar to Greasemonkey

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.

Notes

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.

Answer 1

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.