How can I craft a GreaseMonkey-like script to show a different page in the lower-third?

Question

If you take a look at this page, there's a lot of white space in the bottom.

I wish to use Greasemonkey-like script on that page, that utilises some of that white space and loads another page there (using something like an iFrame).

The URL that I want to be loaded in that iFrame-type-thing (in the lower third) is always whatever View Amazon Product Page is pointing to.
So, I want the code to look at the page, and find where that link points to. (As this is the bit that varies)
I want the iFrame-type thing to be in the lower-third. (It can be the lower quarter, lower fifth.. I don’t mean that literally..!)

I would be very grateful if you could help me brainstorm this.

Optional reading

It’s not quite GreaseMonkey, but you can assume it is

This is for Greasekit on Fluid.app (which is very old, but I am restricted to using 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.

The only difference is you don’t have to to do this bit:

//==UserScript==
//@name        _Displaying an iframe type thing in the lower third
//@include     https://dl.dropboxusercontent.com/u/5546881/*
//@grant       none
// ==/UserScript==

My attempt at answer

var findlink  = document.getElementsByTagName('a');
for (var i = 0;i=“View Amazon Product Page” ; i++ ) {
link result = findlink.getAttribute('href')

}

$(document.body).append (
'<iframe src=+ link + >'
);

@Mathletics Hey, I suppose it’s not necessary to click it. (It just helps visualise). I should make a screenshot with annotations. — Sockie, Nov 23 '13 at 23:50
@Mathletics (Can I post my code as a new answer, below, by pressing the “Answer Your Question” button? Or do I edit the original question?) — Sockie, Nov 24 '13 at 00:21
You edit the original question. Only post an answer if it **is** an answer. — Brock Adams, Nov 24 '13 at 00:23
(I’ve added my attempt above, thanks for the guidance, Brock) — Sockie, Nov 24 '13 at 22:20

score 3 · Accepted Answer · answered Nov 24 '13 at 23:34

3

Since you have jQuery available, use jQuery selectors to get the product link.
Then add the iFrame but give it an id.
Use CSS to position and size it.

The code would look like this, based on the structure of the Dropbox page you linked:

var prodLinks = $("td.product_description a:contains('View Amazon Product Page')");
if (prodLinks.length) {
    var iframeSrc = prodLinks[0].href;
    $("body").append ('<iframe id="gmIframe" src="' + iframeSrc + '"></iframe>');

    $("#gmIframe").css ( {
        "position":     "absolute",
        "bottom":       "1em",
        "left":         "2em",
        "height":       "30%",
        "width":        "94%",
        "z-index":      "17",
        "background":   "#00FF00"
    } );
}

Warning:

This will only work if at least one of the following conditions are met:

The iframe is same domain.
The iframed website doesn't forbid cross-origin framing. (www.amazon.co.uk does forbid such framing.)
You are using a browser that doesn't honor the cross-origin restriction. Firefox honors it, I don't know if Fluid does or not.

answered Nov 24 '13 at 23:34

Brock Adams

90,639
22
233
295

Ah, I don’t have JQuery :( – Sockie Nov 25 '13 at 00:26
I did it, but I can only see a green rectangle. FYI, the page I’m testing is also on Amazon.co.uk but I’ve mirrored it to dropbox so I can link to it in this question (without sharing my login password) – Sockie Nov 25 '13 at 00:26
strangely, it DOES work if I change line 5 to `$("body").append ( '’);` . 1. Does this mean JQuery is working? 2. perhaps there is an issue with your line 5 that’s causing it to not retrieve the correct URL? – Sockie Nov 25 '13 at 00:37
(when I say it works, it displays an iframe in the bottom left of the page with the contents of Amazon.co.uk) Hmm.. wonder why it isn’t in the centre. – Sockie Nov 25 '13 at 00:41
Ah, a further observation is that the page that I am using (but can’t show you as it requires my password or to be logged in) is on `https://www.amazon.co.uk/*` where as it’s liking to `http://www.amazon.co.uk/gp/product/*` (in the URL bar it links to secure http, in the link it’s just plain, vanilla http) – Sockie Nov 25 '13 at 00:49
2

You can see that it gets the right URL by adding `alert(iframeSrc)` after line 5. Your iframe won't be position correctly if you remove the `id="gmIframe"`. Yes, some browsers will block frames to http from an https pages. **what does the error console show?** You can try adding `iframeSrc = iframeSrc.replace (/http:\/\//, "https://");`. – Brock Adams Nov 25 '13 at 00:59
Oh, you’re correct, `alert(iframeSrc)` after line 5 works: the result it gives is `http://www.amazon.co.uk/gp/product/*` – Sockie Nov 25 '13 at 01:23
Can’t find the console.log but I added `iframeSrc = iframeSrc.replace (/http:\/\//, "https://“)` and it now works!! – Sockie Nov 25 '13 at 01:25
Whilst it now works (wohoo!), a further complication is that the page in the iframe is too cluttered .. I can’t actually see the info that I want (the price). Can I make the iFrame only show `
– Sockie Nov 25 '13 at 01:30
Yet more granular: (or, even better, to show `£6.00`) or `£6.00` – Sockie Nov 25 '13 at 01:37
1

Yes you can do that but that is a separate question. You'd basically use jQuery to parse the iframe. Alternatively, skip the iframe and use `GM xmlhttpRequest` to get the page. All of this is covered by existing SO questions. If you ask a new question include a link to the amazon page as well as a snippet of its relevant HTML structure. – Brock Adams Nov 25 '13 at 02:17

How can I craft a GreaseMonkey-like script to show a different page in the lower-third?

Optional reading

It’s not quite GreaseMonkey, but you can assume it is

My attempt at answer

1 Answers1

Warning:

Linked