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

我在我的网页上加载了一个外部网页(例如www.duckduckgo.com)。 我想在div内外获取鼠标的X和Y位置,但是当我在div内时,网页似乎阻止了onmousemove事件发生。 但是,在进入div时, onmouseover事件只会触发一次。

以下是说明我的问题的示例代码:

function mouseEvent(event) {
      var x = event.clientX;
      var y = event.clientY;

      document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}
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%; 
}
<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>

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.
}
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;
}
<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>

为什么它不工作###

让我直接为你解决......

由于iframe或对象被设计成从您的网站到请求的源代码的简单虫洞 ,它们具有自己的功能和对象!

有很多技巧可以用来确定光标的轴线而没有与虫洞相互作用的可能性 ,但是如果你想与它交互,还有其他方法。

如何使它工作###

其中一个就是很好的ajax ,使用它你可以在一个div上加载整个网站,甚至可以在虫洞上做更多的事情! 因为使用ajax将网页细分为骨架,您不仅可以获得您的X和Y,还可以个性化您的页面=)

因为它是ajax,你可以发疯,建立你自己的搜索领域,只从所需的搜索引擎获得结果和链接(因为这是你的项目), 或者你可以简单地将整个页面加载到div或任何其他元素。

如果你和XML不像我没有相处得好, JQUERY可以伸出援助之

链接地址: http://www.djcxy.com/p/96837.html

上一篇: onmousemove event does not fire from within external source?

下一篇: How to call external dll function from java code