javascript - 跟踪 <iframe> 内的用户点击(Wiki 游戏)

Question

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

问题在于，跟踪 iframe 内的用户事件似乎受到限制，除非 iframe 的内容与 Web 应用程序本身托管在同一域中。因此，如果用户单击 iframe 中的链接进入另一个页面，我无法找到一种方法来跟踪用户访问的新页面。即使我只能得到他们点击的链接的名称就足够了。例如，如果用户单击名为 Europe 的 iframe 中的链接，我可以使用 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/

Answer 1

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

但是，您可以创建一个注入(inject)一些代码的代理:

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

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

然后在您的主页上:

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

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

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