onmousemove event does not fire from within external source?
I am loading up an external webpage (ie www.duckduckgo.com in this example) within a div on my webpage. I want to get my mouse X and Y position while within and outside the div, but when I am inside the div, it seems that the webpage blocks the onmousemove event from firing. However, the onmouseover event fires only once when entering the div.
Here is example code that illustrates my problem:
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>WHY IT DOESN'T WORK ###
Let me get this straight for you ...
since iframes or objects are designed to be a simple wormhole from your website to the requested source, they have their own functionality and objects !
there are lots of tricks you can play to determine the axis of the cursor without the possibility to interact with the wormhole , but if you do want to interact with it there are other ways ...
HOW TO GET IT TO WORK ###
one of them is the good old ajax , using it you can load the entire website on a div and do even more than you can on wormholes ! since with ajax you break down the web page to it's skeletons , you'll not only be able to get your X and Y you can even personalize you page =)
since it's ajax you can go crazy on it and build your own search field and only get the results and links from the desired search engine ( since that's you project ) OR you could simply load the entire page on a div or any other element.
if you and XML don't get along well like i don't , JQUERY could lend a hand
链接地址: http://www.djcxy.com/p/96838.html