How can I craft a GreaseMonkey-like script to show

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 + >'
);

Answer 1

• 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.