跟踪 <iframe> 内的用户点击（Wiki 游戏）答案

【问题标题】：tracking user clicks within <iframe> (Wiki game)跟踪 <iframe> 内的用户点击（Wiki 游戏）
【发布时间】：2017-08-10 08:03:24
【问题描述】：

我正在尝试编写一个简单的基于 Web 的 wiki 游戏版本，它以 url 开头，并且有一个目标 url，用户必须通过单击 wikipedia 页面中的链接才能到达该目标 url。总体思路是在 iframe 中包含起始 wikipedia url，在 iframe 中，用户可以单击链接转到其他页面。

问题在于，在 iframe 中跟踪用户活动似乎存在限制，除非 iframe 的内容与 Web 应用程序本身托管在同一个域中。因此，如果用户单击 iframe 中指向另一个页面的链接，我无法找到跟踪用户访问的新页面的方法。即使我能得到他们点击的链接的名称就足够了。例如，如果用户单击 iframe 中名为 Europe 的链接，我可以使用 PHP 转到新页面并动态加载新的维基百科 iframe。如下所示：

<?php
    $article = $_GET["article"];
?>
<iframe id="frame" src="https://en.wikipedia.org/wiki/<?php echo $article ?>"

似乎没有一种明显的方法可以在 iframe 中跟踪用户活动。有什么建议？下面还有一个游戏版本的链接，它的总体思路与我的目标相同。它似乎也使用 iframe 来存储维基百科页面。

http://cs.mcgill.ca/~rwest/wikispeedia/

【问题讨论】：

标签： javascript php jquery html iframe

【解决方案1】：

出于安全原因，如果您无法向 iframe URL 添加代码，则无法衡量与该页面的交互。

但是，您可以创建一个注入一些代码的代理：

window.postMessage(window.location,'*');

您需要重写页面上的链接以引用您的代理而不是其原始目标。

然后在您的主机页面上：

window.addEventListener("message", onMessage, false);

function onMessage(event) {
  console.log(event.data);
}

值得注意的是，这将有效地让任意代码在属于您的 URL 上运行。这可能会带来安全风险。

【讨论】：