Question

关注How to rewrite URLs referenced by Javascript code?我想在其他人的网站上叠加一个按钮（例如，在Stackoverflow的赏金按钮旁边覆盖一个Paypal按钮）并将两个<iframe>滚动在一起。该按钮将位于顶层。该网站将位于底层。

我理解透明<iframe>被clickjacking滥用，但浏览器安全机制似乎阻止了合法用例。在我的情况下，用户看到他/她点击的相同按钮。这甚至可能是浏览器错误。

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

顶部<iframe>拦截所有鼠标点击，即使对于不包含任何组件的区域也是如此。意思是，用户根本无法与底层交互。
如果我使用<iframe>设置顶部pointer-events: none，则会出现相反的问题：用户可以看到顶层，但所有鼠标点击都会转到底层。将pointer-events: auto应用于子组件无济于事（点击仍会传递到底层）。
如果我调整顶部<iframe>的大小和位置，使其面积与我尝试叠加的按钮完全相同，则鼠标单击会转到右侧图层，但顶层无法沿底层滚动。这意味着，按钮始终保持与底层滚动相同的绝对位置。

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

https://stackoverflow.com/a/4087397/14731让我相信这是不可能的。 还有其他方法可以实现吗？

更新：以下是jsfiddle供您使用。 test按钮位于页面中间“NEWS＆amp; VIEWS”的右侧。

Answer 1

更新：新方法

下面与Gili讨论后，解决方案跨多页工作的要求使我重新考虑我的解决方案。

新方法：

目标网站上不需要任何代码更改或特定功能。
在用户导航时（只要他们停留在同一个域中）在每个页面上工作
可以调整以将任何HTML / JS注入任何目标页面中的任何DOM元素

我的解决方案如下：

将您想要展示Widget X的人发送到包含指示页链接的电子邮件
该说明页面包含他们添加到书签栏的书签
他们访问自己的网站并点击您的书签
您的书签将javascript注入其网页
该javascript会创建一个弹出窗口，其内容出现属于目标域，因为该域生成了弹出窗口
然后，弹出窗口监视目标浏览器窗口（window.opener）上的DOM，并在当前页面不包含目标节点ID时注入任意HTML。

它似乎在我的测试中表现良好（完美的Chrome浏览器，尚未在所有浏览器中进行测试），并且似乎适用于从StackOverflow到Twitter的每个目标网站。

现场演示：How to demo an web widget on a third party site without having access to their code

以下示例代码，为了便于阅读而进行了扩展：

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

在部署到＆＃39;指令之前，应将上述内容转换为bookmarklet。潜在客户的登陆页面。

原始解决方案

首先，很抱歉将此作为答案而不是评论发布。我已经考虑了半个小时了，只是意识到我需要50点评论。所以，道歉，但我想分享......

我同意不太可能有跨浏览器方式来做这个双iframe技巧。我阅读了关于javascript URL重写的其他问题，它引出了一个想法：如何创建一个允许您将Javascript注入其页面的书签，而不是尝试将其网站嵌入/劫持？

它可以像这样工作：

将它们指向您托管自定义bookmarklet链接的网站。请他们将其添加到他们的收藏夹中。
要求他们访问他们自己的网站，然后在他们的书签中点击您的书签。
这会将您的JS注入其页面，允许您以任何方式编辑DOM（例如，更改样式，添加DOM元素等）。

像这样的代码，转换为bookmarklet（即包含在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）。

不是你要求的，而是一种可能的解决方案。

将一个iframe叠加在另一个上面，将它们一起滚动

1 个答案: