使用iframe后，鼠标点击位置和实际点击位置不一致

最新推荐文章于 2024-07-08 15:34:48 发布

原创最新推荐文章于 2024-07-08 15:34:48 发布 · 712 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

结论：因为iframe域名和父页面域名不一致导致的

在本地启动项目的时候，鼠标指定的元素在iframe上，发现点击事件不起作用了

点击iframe里面的元素，发现也错位了，

上线之后，父页面部署的域名和iframe中src的域名一致，就可以准确点击了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

small_redhat

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

iframe多层嵌套引起子表错位

weixin_36706903的博客

12-10

1219

bug:iframe多层嵌套的时候，切换时嵌套得子层会自动触发一个滚动到顶部的事件这问题我这里表现为：iframe里嵌套得dialog,dialog得ui-content是iframe,然后点击子表，继续在iframe里打开一个dialog，我这里有二层子表，加上原本的iframe，有4层iframe。切换tab时，切换回来，打开得子表位置错位了正常应该是： dom结构图： ...

Chrome下, iframe中PageUp时导致父/祖先元素显示错位

FuDesign2008的专栏

05-05

2819

Chrome下, iframe中PageUp时导致父/祖先元素显示错位的问题分析与解决问题实际工作中发现, 在Chrome浏览器下, 在iframe中按PageUp键, 会导致父元素显示错位. 如下图: 此时获取父元素的scrollTop, 值为1. 以下是实例代码: Editor Demo

参与评论您还未登录，请先登录后发表或查看评论

嵌入的iframe 鼠标点击iframe后事件无响应

最新发布

weixin_44588893的博客

07-08

1995

页面中嵌入 iframe 标签,当我们给页面添加了事件之后,鼠标点击到 ifarme 上,事件会失效。

通过iframe引入外部页面导致的问题(菜单链接外部页面后,通过鼠标拖动右侧菜单栏，改变它的宽度，鼠标释放时，鼠标拖动依然会改变菜单的宽度。)

qq_40425410的博客

08-28

375

拖动鼠标后只进行了一个操作，放开鼠标左键，由于链接正‘常的内部页面时，放开鼠标左侧按键后没有改变菜单宽度，可以推测出此时onmouseup事件没有触发导致了这个问题。放开鼠标左侧按键后，鼠标拖动时依然会改变右侧菜单的宽度，可以知道可能document对象的onmousemove事件依然绑定了处理右侧菜单宽度的函数。基于上述的结论，可以这样解决，当鼠标左键按下操作左侧菜单时通过js操作document的API生成了一个本地的遮罩，放开左键时，取消这个遮罩就可以了。...

【虚拟机】虚拟机内鼠标显示与实际位置不一致，焦点偏移解决

qq_29684715的博客

04-03

1万+

我是双屏幕显示，用虚拟机（vmware）时，发现鼠标存在焦点偏移的情况；将显示器的刷新频率改为60hz，焦点偏移情况得到解决。一、更改刷新频率桌面右击>显示设置>高级显示设置>适配器属性>监视器>更改刷新频率60hz>确定 ...

有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题

lianmindiandi

06-22

1095

有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移

基于JavaScript实现获取鼠标点击位置坐标的方法

10-27

在不考虑iframe的情况下，不同浏览器对获取鼠标点击位置相对于屏幕的坐标（screenX和screenY）具有较好的一致性。简单来说，可以通过如下代码获取： ```javascript function getMousePos(event){ var e = event ||...

基于JavaScript获取鼠标位置的各种方法

10-23

2. `clientX` 和 `clientY`：这两个属性表示鼠标点击位置相对于浏览器窗口的左上角坐标，不包括浏览器的工具栏、地址栏等非内容区域。但是，它们不考虑页面的滚动情况。 ```javascript function getMousePos(event)...

IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

09-01

总的来说，`setCapture`和`releaseCapture`是IE8中解决iframe拖拽事件的一种方法，它们允许开发者更精确地控制事件流，以确保在拖动过程中不丢失任何鼠标事件。虽然这些方法在现代浏览器中已被弃用，但在维护旧项目...

# 点击左边按钮，页面出现在右边（iframe标签） #

别忘了还是诗歌和远方

08-19

3574

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctr

IOS手机唤起键盘，输入框失去焦点后页面元素点击事件位置偏移

weixin_41587194的博客

09-05

2431

移动端页面中如果有input框，在IOS手机中，当唤起系统键盘输入数据完成后，再去点击页面其他元素，会发现点击位置偏移的问题，这是因为在IOS系统中唤起键盘后页面向上滚动了一段距离。这就需要我们在input框失去焦点时取消页面的滚动距离window.scroll(0,0);这个方法可以解决此问题 ...

使用iframe 发现样式错位的解决办法

qq_44716001的博客

11-21

492

原理就是默认隐藏点击的时候（或者需要的时候）展示出来。方法二宽高为0。

解决引用iframe点击后出现页面不会完全跳转和iframe标签与下面的标签之间的间距

m0_61843988的博客

08-01

2649

引用iframe点击里面的内容，出现整个网页不会完全跳转到另外一个页面，而是只有iframe标签跳转了。然后之间的间距没了，但是会出现缺失文字，在给iframe下面的内容的。父标签写上font-size14px;引用iframe出现与下面内容有间距。......

Iframe多次嵌套导致的页面内容不适配系统缩放比例

baidu_39548069的博客

12-04

1544

iframe多层嵌套导致页面内容不跟随系统缩放比例进行放大或缩小，解决方案是在iframe项目中通过获取屏幕宽度与1920做比较，手动更改document.documentElement.zoo进行适配

解决iframe内嵌移动端页面出现样式错乱问题

weixin_64141611的博客

07-10

4377

出现移动端页面样式错乱的原因：手动给iframe标签设置高度造成的。解决思路：在iframe页面完成DOM渲染再给iframe设置高度。具体实现：

鼠标定位偏移如何解决

wenrou12352的博客

10-12

1386

鼠标定位偏移

ios下，iframe页面中的position:fixed定位布局错误

kylin_zdd的专栏

09-19

6677

bug现象开发微信公众账号，需要使用iframe展示一个页面，点击这个页面中的按钮时，会弹出一个对话框，对话框使用fixed定位，关键布局信息如下所示： div.fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100; z-index: 100; } 在网页上、Android版微信中都没问题，但是iOS中，该

页面嵌入百度地图或iframe引入百度地图