Html 将一个iframe覆盖在另一个iframe上，将它们一起滚动

接下来，我想在其他人的网站上覆盖一个按钮（例如，在Stackoverflow的bounty按钮旁边覆盖一个Paypal按钮），并让这两个按钮一起滚动。按钮将位于顶层。该网站将驻留在底层

我知道透明的

被滥用了，但浏览器安全机制似乎阻止了合法的使用案例。在我的例子中，用户看到的按钮与他/她单击的按钮相同。甚至有可能这是一个浏览器错误

以下是我在Chrome下看到的内容：

顶部的

截取所有鼠标点击，即使对于不包含任何组件的区域也是如此。也就是说，用户根本无法与底层交互

如果我用

指针事件设置顶部
的样式：无

则会出现相反的问题：用户可以看到顶层，但所有鼠标单击都会转到底层。将

指针事件：auto

应用于子组件没有帮助（单击仍会传递到底层）

如果我调整顶部

的大小和位置，使其面积正好等于我试图覆盖的按钮，则鼠标单击转到右侧层，但顶层无法沿底层滚动。这意味着，按钮始终保持在与底层滚动相同的绝对位置

我是否可以在顶层放置一个按钮，使其始终与底层的某个位置对齐？在我将Paypal按钮放置在Stackoverflow悬赏旁边的示例中，我希望当用户向下滚动问题时，Paypal按钮会从页面上滚下

这让我相信这是不可能的还有其他方法可以实现吗？

---

更新：这里有一个供您玩的游戏。“代码>测试”/代码>按钮位于页面中部的“新闻和视图”的右边。

< P> <强>更新：新方法< /强>

在下面与Gili讨论之后，解决方案跨多个页面工作的要求让我重新思考我的解决方案

新方法：

不需要对目标站点进行任何代码更改或特定功能

在用户导航时在每个页面上工作（只要他们停留在同一个域上）

可以调整为将任何HTML/JS注入任何目标页面中的任何DOM元素

我的解决方案如下：

向您想要演示Widget X的人发送一封电子邮件，其中包含指向您的说明页面的链接

该说明页面包含一个书签，用户可以将其添加到书签栏中

他们访问自己的站点并单击书签

您的bookmarklet将javascript注入到页面中

javascript创建了一个弹出窗口，其中的内容似乎属于目标域，因为该域生成了弹出窗口

然后，该弹出窗口监视目标浏览器窗口（window.opener）上的DOM，并在当前页面不包含目标节点ID时注入任意HTML

它似乎在我的测试中运行良好（在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);

我已经在Chrome上测试过了，它似乎很乐意跨域加载JS。唯一的规则似乎是协议必须匹配（http或https）

---

不完全是您所要求的，而是一个可能的解决方案。

首先，感谢您将此作为答案发布（在我看来，评论是针对问题的问题，而不是发布答案）。其次，我考虑过使用bookmarklet，但问题是客户在页面间导航时需要重新应用bookmarklet。有没有一种方法可以让我在链接之间保持一致？如果你在第一页注入的JS创建了一个弹出窗口呢？用户需要接受弹出窗口，但如果他们接受，该窗口可以运行setInterval来检查并在该域的任何后续页面上重新注入JS。因为弹出窗口是由他们的域创建的，所以浏览器安全性可能允许这种情况发生。这需要在一个合适的服务器上进行测试——这不是一个可以在小提琴上测试的东西。我不认为这会有什么帮助。我无法让外来代码创建弹出窗口，因为我无法控制它们的代码。如果我能用我自己的代码创建一个弹出窗口，那将不会有什么帮助，因为我的代码运行在与外来代码不同的域中。诀窍是通过bookmarklet注入弹出窗口，这样就不会有代码在你自己的域中运行。事实上，浏览器会认为弹出窗口是由他们的域发起的。今天早上，我正在进行一个概念的现场验证——它已经开始工作了，我会尽快与大家分享它。Gili，我只是说，我已经更新了我之前概述的答案，并包括了一个现场演示。我认为它工作得很好，但我很想听听你的想法。

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