为什么不工作###

Question

我正在我的网页上的div中加载一个外部网页（在本例中为www.duckduckgo.com）。我希望在div内部和外部获得我的鼠标X和Y位置，但是当我在div中时，似乎网页阻止onmousemove事件被触发。但是，onmouseover事件在输入div时仅触发一次。

以下示例代码说明了我的问题：

＆＃13;

function mouseEvent(event) {
      var x = event.clientX;
      var y = event.clientY;

      document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}

＆＃13;

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;        
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
#form1 {
    height: 100%;
    width: 100%;
}
#pageDiv {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    width: 100%; 
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="pageDiv"> 
            <label id="label">hello</label>
            <object id="page" type="text/html" data="https://duckduckgo.com/" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)">
            </object>
        </div>
    </form>
</body>
</html>

＆＃13;

如何在此网页上的任何位置获取鼠标X和Y位置（即不只是在持有外部源的div顶部）？我尝试将event.preventDefault();添加到 mouseEvent 函数的开头，但这在帮助领域没有任何作用。

我猜测外部网页正在窃取我的焦点。是这样的吗？无论如何我可以实现常数X和Y坐标更新吗？

Answer 1

＆＃13;

function mouseEvent(event) {
      var x = event.clientX;
      var y = event.clientY;

      document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}

function removeCheat() {
     // remove cheat div or remove right/bottom position. 
     // Not sure what your ultimate goal is.
}

＆＃13;

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;        
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
#form1 {
    height: 100%;
    width: 100%;
}
#pageDiv {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    width: 100%; 
}
#cheat {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

＆＃13;

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div id="cheat" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)" onmousedown="removeCheat()"></div>
    <form id="form1" runat="server">
        <div id="pageDiv"> 
            <label id="label">hello</label>
            <object id="page" type="text/html" data="https://duckduckgo.com/">
            </object>
        </div>
    </form>
</body>
</html>

＆＃13;

Answer 2

为什么不工作###

让我直截了当地......

由于iframe或对象被设计为从您的网站到请求的来源的简单虫洞，因此它们有自己的功能和对象！

你可以玩许多技巧来确定光标轴而不可能与虫洞交互，但是如果你想与它进行交互还有其他方法......

如何让它工作###

其中一个是好的 ajax ，使用它你可以在div上加载整个网站，甚至比虫洞更多！因为使用ajax你将网页分解为它的骨架，你不仅可以获得你的X和Y，你甚至可以个性化你的页面=）

因为它是ajax你可以疯狂地建立你自己的搜索字段，只获得所需搜索引擎的结果和链接（因为那是你的项目） OR 你可以简单地加载整个div上的页面或任何其他元素。

如果你和 XML 不能很好地相处，那么 JQUERY 可以伸出援助之手

onmousemove事件不会从外部源中触发？

2 个答案:

为什么不工作###

如何让它工作###