0

跟进如何重写 Javascript 代码引用的 URL？我想在别人的网站上覆盖一个按钮（例如，在 Stackoverflow 的赏金按钮旁边覆盖一个 Paypal 按钮）并让这两个<iframe>s 一起滚动。该按钮将位于顶层。该网站将位于底层。

我知道 transparent<iframe>被滥用于点击劫持，但浏览器安全机制似乎阻止了合法用例。在我的情况下，用户看到的是他/她正在点击的同一个按钮。甚至有可能这是一个浏览器错误。

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

  1. 顶部<iframe>拦截所有鼠标点击，即使是不包含任何组件的区域。这意味着，用户根本无法与底层交互。
  2. <iframe>如果我对顶部进行样式设置，pointer-events: none则会出现相反的问题：用户能够看到顶层，但所有鼠标点击都转到底层。应用pointer-events: auto到子组件没有帮助（点击仍然通过底层）。
  3. 如果我调整顶部的大小和位置，<iframe>使其面积与我要覆盖的按钮精确相等，则鼠标单击会转到右侧层，但顶层无法与底层一起滚动。意思是，按钮始终保持在与底层滚动相同的绝对位置。

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

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

更新：这是一个jsfiddle供您使用。该test按钮位于页面中间的“NEWS & VIEWS”右侧。

4

1 回答 1

0

更新：新方法

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

新方法：

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

我的解决方案如下：

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

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

现场演示：如何在第三方网站上演示 Web 小部件而无需访问其代码

下面的示例代码，为了便于阅读而扩展：

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

在部署到潜在客户的“说明”登录页面之前，应将上述内容转换为书签。

原始解决方案

首先，很抱歉将其发布为答案而不是评论。我已经考虑了半个小时，才意识到我需要 50 声望才能发表评论。所以，很抱歉，但我想分享...

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

它可以像这样工作：

  1. 将他们引导到您托管自定义书签链接的站点。要求他们将其添加到他们的收藏夹中。
  2. 请他们访问他们自己的网站，然后在他们的书签中单击您的书签。
  3. 这会将您的 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）。

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

于 2014-03-11T22:19:34.060 回答