设置iframe不可点击

原创 已于 2022-09-20 10:45:49 修改 · 2.7k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue #javascript #css3
于 2022-09-20 10:40:40 首次发布
博客主要介绍了设置样式属性为pointer-events: none，还转载了pointer-events的相关内容，涉及前端开发中样式设置方面的知识。
怎么禁止iframe里的元素输入跟操作？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
10-14 1661
元素永远不会成为鼠标事件的target (en-US)。但是，当其后代元素的 pointer-events 属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。比如我需要禁止用户输入数据，去进行提交操作。我们加一下这个样式给到 iframe。加了之后就无法输入跟提交了。
iframe解决图片防盗链，并解决iframe对事件的拦截
柴钰棋的博客
07-03 2237
iframe解决图片防盗链，并解决iframe对事件的拦截图片资源因防盗链而无法加载。思路：用iframe加载一个页面，该页面空referrer请求资源。 图片资源因防盗链而无法加载。 我在引用外部图片资源时，提示403。很显然对referrer进行了过滤。浏览器新窗口试一下，发现可以打开，说明空referrer可以解决这个问题。 在head标签加上<meta name="referrer" content="never">就可以打开了。 但是这样有个问题，不仅请求资源不带referrer，打开
面试官提问你会如何阻止iframe中的点击事件
最新发布
2403_88087488的博客
01-13 690
在面试中，你可以根据具体情况选择最适合的方法，并解释其优缺点。面试官通常会关注你对这些方法的理解和应用能力，以及你对浏览器安全策略的了解。在前端开发的面试场景中，面试官常常抛出各种具有挑战性的问题，以此来考察应聘者的技术能力与问题解决思维。比如，“你会如何阻止 iframe 中的点击事件” 这一问题，看似简单，实则涉及到对 DOM 操作、事件机制等知识的深度理解与运用。在面试中，面试官问到如何阻止iframe中的点击事件，这是一个关于前端开发和浏览器安全策略的问题。
iframe内部再次嵌套iframe禁用右击事件
孜然卷的博客
09-15 4128
iframe内部再次嵌套iframe禁用右击事件 document.oncontextmenu=()=>{returnfalse}这个应该是也可以操作实现的，只是当时捣鼓好一会只能控制外层的iframe 测试发现浏览器自带右击可以另存为/保存 是一个iframe嵌套于一个项目之中
iframe屏蔽内部超链接点击（iframe onload）
weixin_45152848的博客
06-12 5197
资源中心项目中遇到的问题，调用第三方预览插件，文档中如果有链接，用户点击在iframe内部或者在父级页会打开新页面，需要屏蔽掉 网上的教程大多是去掉超链接，加遮罩之类的，初级解决方案的确是加了一个遮罩，但是后来发现当用平板去预览的时候， 用户可以通过点击到iframe内部，再通过上下左右键盘的方式去选择超链接， 从而跳走（带有键盘的平板），后续打开直播网页，观看直播的问题 iframe的诸多属性...
点击弹出窗口网页背景变暗且不可点的效果(三)：iframe实现
w_gaoping的博客
04-06 326
在[url]http://highping.iteye.com/admin/blogs/362230[/url]中用Iframe实现了点击弹出窗口网页背景变暗且不可点的效果，虽然解决了弹出窗口被select遮挡住的问题，但网页背景的select依然没有被遮挡住，IE7解决了此类BUG；这里仍然采用Iframe作网页透明背景，让背景的select控件不可选。 [code="ht...
监听iframe中的鼠标点击事件
Nobita
10-30 6621
是否能监听iframe中的鼠标点击？ 难题1：跨源无法突破 难题2：监听无效 经各种尝试后放弃，无解！ 建议：在Iframe窗体里面，执行了某个事件之后，触发父窗口页面的方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
给iframe添加点击事件
m0_53667674的博客
08-21 6914
解决iframe标签所处的盒子点击事件失效问题 给每个iframe标签设置样式，目的是时消除iframe标签里面的事件 #iframe1,#iframe2, #iframe3, #iframe4 { pointer-events: none; } 再给包裹iframe标签的盒子设置点击事件 HTML: <div class="box"> <div class="box1" style="background-color: rgba(0, 0, 0, 0);position:rela
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
weixin_44434938的博客
12-26 7206
iframe添加addEventListener无效、获取Iframe的contentWindow和contentDocument失败，不使用postMessag，如何监听iframe点击事件
点击iframe禁止跳转
Cwcgirl的博客
12-28 731
【代码】点击iframe禁止跳转。
父级页面监听iframe点击事件
PGD_607的博客
12-09 5980
通过contentDocument属性 定义和用法： contentDocument 属性以 HTML 对象返回框架容纳的文档。 语法：frameObject.contentDocument html: <iframe id="iframe" frameborder=0 scrolling="no"></iframe> 父级页面js: document.getEleme...
关于iframe点击事件无效的解决办法
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
iframe监听鼠标点击事件
sxqlmc000的博客
04-25 1万+
iframe监听鼠标点击事件需要实现的页面逻辑是： 1. 点击父窗体中按钮，显示侧边栏； 2. 点击页面其他区域（iframe）可以隐藏侧边栏先构造页面文档结构：<html> <body> <aside id="sidebar"> <%--这是需要隐藏的侧边栏--%> </aside> <button><%--点击按
监听iframe点击事件
越努力越幸运
04-09 9303
var IframeOnClick = { resolution: 200, iframes: [], interval: null, Iframe: function() { this.element = arguments[0]; this.cb = arguments[1]; ...
Feature Police 导致iframe页面无法使用粘贴功能
ilovexiaoming1的博客
02-10 2877
说明 在Chrome 81版本之上时，通过iframe引入的页面无法正常使用粘贴板。此时，控制台会输出 DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document. See https://goo.gl/EuHzyv for more details. 错误，这是由于web规范之Feature Police导致的。 Feat...
iframe中的右键 禁止_iframe里的页面禁止右键事件_html/css_WEB-ITnose -
weixin_39791386的博客
12-19 1385
在做系统框架的时候，常常会用到iframe，当需求是iframe不能出现纵向滚动条，需要根据加载页面的高度，一致延伸，但是iframe的高度自适应问题比较麻烦，当时也是纠结了好久。 　　方案1：当遇到iframe里面嵌套的页...在子页面中加入：即可在做系统框架的时候，常常会用到iframe，当需求是iframe不能出现纵向滚动条，需要根据加载页面的高度，一致延伸，但是iframe的高...
一个iframe调用另一个iframe的按钮点击事件
zjg
09-09 705
一个iframe调用另一个iframe的按钮点击事件。
vue中获取iframe页面的点击事件（第三方iframe，不可操作）
qq_67447855的博客
09-07 3305
header上有element的浮窗（dropdowm和popover）打开浮窗后，点击浮窗外的区域浮窗都会关闭，但是点击iframe的区域浮窗就不会关闭。iframe属于第三方的页面，改不了他的代码，就不能点击后发送postmessage。
vue中iframe的使用导致IOS设备中触发事件无效
weixin_40533586的博客
03-30 3127
vue中iframe的使用导致IOS页面中触发事件无效（移动端） 1、◎◎◎◎◎◎◎◎◎◎ 页面描述 及 示意图 ◎◎◎◎◎◎◎◎◎◎ 页面布局是：标题 和 内容区 标题：返回键是定位的（定不定位与该问题无关紧要） 内容：父容器包含了iframe标签。该iframe是用原生js 动态创建 并追加给了父容器 2、◎◎◎◎◎◎◎◎◎◎ 问题描述 ◎◎◎◎◎◎◎◎◎...
如何监控iframe里面页面的点击事件
热门推荐
赶路人儿
07-15 1万+
根据浏览器同源策略，如果iframe中是一个跨域的页面，那么在父页面中无法监听到iframe页面中的所有行为。 最近在看论坛，发现了一个变通的办法——监听鼠标停留在iframe上这个动作，顺便记录下来： $('iframe').hover( function () { 　　alert('AD frame!');  ); 顺藤摸瓜，就发现了腾讯团队写的《iframe跨
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值