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

最新推荐文章于 2024-10-10 20:59:20 发布
最新推荐文章于 2024-10-10 20:59:20 发布
阅读量430 收藏 1
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samll_redhat/article/details/135087205
版权

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

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

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

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

small_redhat
关注
iframe多层嵌套引起子表错位
weixin_36706903的博客
12-10 1156
  bug:iframe多层嵌套的时候，切换时嵌套得子层会自动触发一个滚动到顶部的事件 这问题我这里表现为：iframe里嵌套得dialog,dialog得ui-content是iframe,然后点击子表，继续在iframe里打开一个dialog，我这里有二层子表，加上原本的iframe，有4层iframe。切换tab时，切换回来，打开得子表位置错位了 正常应该是： dom结构图： ...
嵌入的iframe 鼠标点击iframe后事件无响应
weixin_44588893的博客
07-08 1043
页面中嵌入 iframe 标签,当我们给页面添加了事件之后,鼠标点击到 ifarme 上,事件会失效。
iframe页面点击操作总是跳到顶部的问题
爱米酱的博客
03-03 2572
在iframe内加载的表中，操作下的按钮用a标签布局，但是会出现一个非常不好的体验，就是当页面有滚动条的时候，点击a标签，列表会自动滚动到顶部。 原因： 应该是浏览器会把 "#" 当作是一种页面跳转的口令，接到这个口令就会把页面滚动到原始位置。 为什么要使用href=”javascript:void(0);” href=”javascript:void(0);”这个的含义是，让超链接去执行...
通过iframe引入外部页面导致的问题(菜单链接外部页面后,通过鼠标拖动右侧菜单栏，改变它的宽度，鼠标释放时，鼠标拖动依然会改变菜单的宽度。)
qq_40425410的博客
08-28 326
拖动鼠标后只进行了一个操作，放开鼠标左键，由于链接正‘常的内部页面时，放开鼠标左侧按键后没有改变菜单宽度，可以推测出此时onmouseup事件没有触发导致了这个问题。放开鼠标左侧按键后，鼠标拖动时依然会改变右侧菜单的宽度，可以知道可能document对象的onmousemove事件依然绑定了处理右侧菜单宽度的函数。基于上述的结论，可以这样解决，当鼠标左键按下操作左侧菜单时通过js操作document的API生成了一个本地的遮罩，放开左键时，取消这个遮罩就可以了。...
【虚拟机】虚拟机内鼠标显示与实际位置不一致，焦点偏移解决
qq_29684715的博客
04-03 1万+
我是双屏幕显示，用虚拟机（vmware）时，发现鼠标存在焦点偏移的情况； 将显示器的刷新频率改为60hz，焦点偏移情况得到解决。 一、更改刷新频率 桌面右击>显示设置>高级显示设置>适配器属性>监视器>更改刷新频率60hz>确定 ...
有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
lianmindiandi
06-22 956
有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
# 点击左边按钮，页面出现在右边（iframe标签） #
别忘了还是诗歌和远方
08-19 3540
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctr
解决引用iframe点击后出现页面不会完全跳转和iframe标签与下面的标签之间的间距
m0_61843988的博客
08-01 2450
引用iframe点击里面的内容，出现整个网页不会完全跳转到另外一个页面，而是只有iframe标签跳转了。然后之间的间距没了，但是会出现缺失文字，在给iframe下面的内容的。父标签写上font-size14px;引用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 发现样式错位的解决办法
qq_44716001的博客
11-21 346
原理就是默认隐藏 点击的时候（或者需要的时候）展示出来。方法二 宽高为0。
VUE使用 iframe 嵌入网页
lilylry的博客
08-11 1万+
但若嵌入的网页是第三方网页，对方的操作可能存在安全风险。为了限制的风险，HTML 提供了sandbox属性，允许设置嵌入的网页的权限，等同于提供了一个隔离层，即“沙箱”。allow-storage-access-by-user-activation：允许在用户激动的情况下，嵌入的网页通过 Storage Access API 访问父窗口的储存。问题：容器云嵌入该工程时使用iframe嵌入，嵌入的路径是动态的，路由的代理会产生问题，运维功能嵌入其他平台时，路径也是动态的同样也需要配置。
鼠标定位偏移如何解决
wenrou12352的博客
10-12 968
鼠标定位偏移
在vue中嵌入iframe页面
热门推荐
ForgivenCheney的博客
07-29 1万+
[Talk is cheap. Show me the code] 不想看理论知识请直接移步最后代码示例。 一、嵌入iframe页面业务场景 项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。 二、iframe是什么 ifram标签规定了一个内联框架，让我们...
PC 打开 vue h5移动端 页面 不变形《转载》
TwoBE9876的博客
05-01 1450
有时候，我们想让pc打开适配手机的h5，并且不变形，在不使用媒体查询的情况下，我们可以使用以下方式： 实现功能如下 pc打开 周围留空白，居中显示 当浏览器切换为手机模式/手机打开网址时 会变为手机模式 以下为主要代码 public 文件夹下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script as..
web扩展
最新发布
x737510的博客
10-10 595
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
jquery 监听 iframe 鼠标点击事件
04-08
可以使用以下代码监听 iframe 的鼠标点击事件： ``` $(document).ready(function(){ $('iframe').contents().find('body').on('click', function(){ // 处理点击事件的逻辑 }); }); ``` 希望这个回答对你有帮助。还有，为什么程序员总是喜欢使用黑色背景？因为黑色可以让 BUG 显眼！哈哈哈哈哈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值