Overlay One Iframe On Top Of Another, Scroll Them Together

Following up on How to rewrite URLs referenced by Javascript code? I'd like to overlay a button on top of someone else's website (e.g. overlay a Paypal button alongside Stackoverfl

Solution 1:

Update: New approach

Following discussion with Gili below, the requirement for the solution to work across multiple pages made me rethink my solution.

The new approach:

1. Doesn't require any code changes or specific features on the target site.
2. Works on every page while the user navigates (as long as they stay on the same domain)
3. Could be tweaked to inject any HTML/JS into any DOM element within any target page

My solution works as follows:

1. Send the person you want to demonstrate Widget X to an email with a link to your instructions page
2. That instructions page contains a bookmarklet which they add to their bookmarks bar
3. They visit their own site and click your bookmarklet
4. Your bookmarklet injects javascript into their page
5. That javascript creates a pop-up window with content that appears to belong to the target domain, since that domain generated the popup
6. That pop-up window then monitors the DOM on the target browser window (window.opener) and injects our arbitrary HTML whenever the current page doesn't contain our target node ID.

It seems to work well in my testing (perfect in Chrome, haven't tested across all browsers yet) and seems to work on every target site from StackOverflow to Twitter.

Live demo here: How to demo an web widget on a third party site without having access to their code

Sample code below, expanded for readability:

s = "<scripttype='text/javascript'>setInterval(function() { if(!window.opener.document.getElementById('gctrlPixelator')) {var i=document.createElement('IMG');i.src='//lorempixel.com/400/200/';i.id='gctrlPixelator';i.style.cssText='top:20;right:20;position:absolute;z-index: 9999;';window.opener.document.getElementsByTagName('body')[0].appendChild(i);}},500);</script>";
t = "<divstyle='text-align: center; font-family: Arial, Helvetica;'><h1style='font-size: 18px;'>Demo running!</h1> Keep this window open and return to the main site window to continue the demo.</div>";
w = window.open('','name','height=200,width=400');
w.document.write(s);
w.document.write(t);

The above should be converted into a bookmarklet before deploying to an 'instructions' landing page for a potential client.

Original solution

First, sorry for posting this as an answer rather than as a comment. I've been thinking about this for half an hour, and only just realised I need 50 reputation to comment. So, apologies, but I wanted to share...

I agree that it's unlikely there is a cross browser way to do this double iframe trick. I read your other question about javascript URL rewriting and it lead me to an idea: Rather than trying to embed/hijack their site on another URL, how about creating a bookmarklet that allows you to inject your Javascript into their page?

It could work like this:

1. Direct them to your site where you host the custom bookmarklet link. Ask them to add it to their favorites.
2. Ask them to go to their own site, then click your bookmarklet in their bookmarks.
3. This would inject your JS into their page, allowing you to edit the DOM any way you wanted (e.g. changing styles, adding DOM elements, etc.)

Code something like this, converted to a bookmarklet (i.e. wrapped in a function with a javascript: at the start) could do the trick...

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://www.example.com/file.js");
document.getElementsByTagName("head")[0].appendChild(script);

I've tested that in Chrome and it seems happy to load the JS cross-domain. The only rule seems to be that the protocols must match (http or https).

Not quite what you asked for, but a possible solution.