javascript:制作一个 iframe 来获取鼠标的 x&y

Question

我有一个 iframe

<iframe id="EXAMPLE"></iframe>

编辑:如何使用 javascript 使 iframe 实时获取鼠标坐标？

Answer 1

在 HTML 中你有这样的:

<iframe src="http://example.com" id="test"></iframe>

设置一些 CSS 样式:

body {
    width: 500px;
    height: 500px;
    background-color: black;
}

#test {
    left: 10px;
    top: 10px;
    position: absolute;
}

现在，您必须获取文档上的鼠标位置。您可以使用 jQuery mousemove 处理程序:

$("body").on("mousemove", function(e) {
    console.log("X: " + e.clientX + "px Y: " + e.clientY + "px");
});

然后，设置文档上的iframe位置:

function update(e) {
    $("#test").css("left", e.clientX + 10 + "px");
    $("#test").css("top", e.clientY + 10 + "px");
}

现在，只需在 mousemove 中调用 update 函数即可。

查看实时预览 here .

如果您也想在 iframe 上检测 mousemove，请将 pointer-events:none 添加到 iframe风格。已测试here .