Lay one iframe on top of the other, scroll them together

Question

Follow How do I rewrite URLs referenced by Javascript code? I would like to overlay a button on top of another site (for example, overlay a Paypal button next to Stackoverflow bounty) and scroll through two <iframe>. The button will be in the top layer. The website will be in the bottom layer.

I understand that transparent ones <iframe>were / abused for clickjacking , but the browser protection mechanism seems to block legitimate use cases. In my case, the user sees the same button that he clicks. It is even possible that this is a browser error.

Here is what I see in Chrome:

• The top <iframe>captures all mouse clicks, even for areas that do not contain any components. This means that users generally cannot interact with the lower level.
• If the style style <iframe>c pointer-events: nonelooks like this: users can see the top layer, but all mouse clicks go to the bottom level. Applying pointer-events: autoto child components does not help (clicks still go to the bottom level).
• If I am the size and position of the top <iframe>, so its area is exactly equal to the button I'm trying to overlay, then the mouse clicks go to the right layer, but the top layer cannot scroll along the bottom layer. By value, the button always remains in the same absolute position as the bottom layer scrolls.

Is it possible for me to place the button in the upper layer so that it always aligns with a certain position in the lower layer? In the example, when I put the Paypal button along with the Stackoverflow award, I expect the Paypal button to scroll the page when the user scrolls the question.

qaru.site/questions/296337 / ... it makes me think that this is impossible. Is there any other way to implement this?

UPDATE . Here you can jsfiddle . The button testis located to the right of "NEWS AND VIEWS" in the middle of the page.

Answer 1

Update: New Approach

, .

:

• .
• ( )
• , HTML/JS DOM .

:

• , X, .
• ,
• .
• javascript
• javascript , , , ,
• DOM (window.opener) HTML , node.

, ( Chrome, ) , , StackOverflow Twitter.

: -

, :

s = "<script type='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 = "<div style='text-align: center; font-family: Arial, Helvetica;'><h1 style='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);

bookmarklet, .

-, , . , , 50 , . , , ...

, - iframe. URL- JavaScript : , / URL-, , Javascript ?

:

• , . .
• , .
• JS , DOM (, , DOM ..).

, (.. javascript: ) ...

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

Chrome , , JS--. , (http https).

, , .