=波波日志 > JavaScript/Ajax > 获取iframe中鼠标事件在父页的坐标位置=
获取iframe中鼠标事件在父页的坐标位置
如果在iframe中单击鼠标时,使用event.clientX和event.clientY获取到的是点击的位置相对于iframe的坐标位置,并非是相对于父页的,所以如果要获取相对于父页的坐标位置,就需要加上iframe的绝对位置x和y,这样才是相对于父页的坐标位置。
换算关系:相对坐标x=iframe绝对x位置+iframe内触发的鼠标x位置。
注意事项:由于要使用到父页的数据,所以不能跨顶级域名,只能跨2级域名
代码如下
test.htm
+展开
-HTML
<iframe src="b.htm" width="300" height="300" id="ifr"></iframe>
<script type="text/javascript">
var ifX=false,ifY=false;//iframe的绝对位置
window.onload=function(){
var ifr=document.getElementById('ifr');
ifX=ifr.offsetLeft;
ifY=ifr.offsetTop;
while(ifr=ifr.offsetParent){
ifX+=ifr.offsetLeft;
ifY+=ifr.offsetTop;
}
}
</script>
<script type="text/javascript">
var ifX=false,ifY=false;//iframe的绝对位置
window.onload=function(){
var ifr=document.getElementById('ifr');
ifX=ifr.offsetLeft;
ifY=ifr.offsetTop;
while(ifr=ifr.offsetParent){
ifX+=ifr.offsetLeft;
ifY+=ifr.offsetTop;
}
}
</script>
b.htm
+展开
-HTML
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置
<script type="text/javascript">
document.onclick=function(e){
if(parent.ifX===false){alert('父页未初始化完毕,请稍后!');return false;}//判断父页是否初始化了iframe的绝对位置
e=e||event;
alert('x:'+(e.clientX+parent.ifX)//当前的位置加上iframe在父页的绝对位置就是相对父页的坐标了
+'\ny:'+(e.clientY+parent.ifY))
}
</script>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置<br>
获取iframe中鼠标事件在父页的坐标位置
<script type="text/javascript">
document.onclick=function(e){
if(parent.ifX===false){alert('父页未初始化完毕,请稍后!');return false;}//判断父页是否初始化了iframe的绝对位置
e=e||event;
alert('x:'+(e.clientX+parent.ifX)//当前的位置加上iframe在父页的绝对位置就是相对父页的坐标了
+'\ny:'+(e.clientY+parent.ifY))
}
</script>
类别:JavaScript/Ajax 作者:波波 日期:2010-07-14 【评论:0】
暂时没有评论!
发表留言
百度赞助
同类热门博文
- ·AJAX跨域问题解决办..
- ·ajax问题总结
- ·jQuery dataType指定..
- ·ajax+asp.net+mssql..
- ·ajax无刷新上传文件..
- ·ajax对象abort方法
- ·JavaScript代码,变..
- ·fckeditor编辑器在F..
博格Tag
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(598)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(96)
- 其他(75)
- showbo日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(25)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
- ·javascript实现html..
- ·Javascript风格要素..
- ·Javascript风格要素
- ·动态加载JavaScript
- ·JavaScript陷阱
- ·ajax技巧
- ·IE对CSS样式表的限制..
- ·什么是Javascript匿..
随机博文
