Menu
I am loading up an external webpage (i.e. 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>How can I get the mouse X and Y position anywhere on this webpage (i.e. not just on top of the div holding the external source)? I tried adding event.preventDefault(); to the beginning of the mouseEvent function, but that did nothing in the realms of helping.
I am guessing the external webpage is stealing my focus away. Is this the case? Is there anyway I can achieve constant X and Y coordinate updating?
741
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>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 ...
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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
