怎么禁止iframe里的元素输入跟操作?

简介: 怎么禁止iframe里的元素输入跟操作?

问题

比如我需要禁止用户输入数据,去进行提交操作

9feb8089978746bbb8574422f2622e95.png


解决

我们可以使用 pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。

/* Keyword values */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* SVG only */
pointer-events: visibleFill;    /* SVG only */
pointer-events: visibleStroke;  /* SVG only */
pointer-events: visible;        /* SVG only */
pointer-events: painted;        /* SVG only */
pointer-events: fill;           /* SVG only */
pointer-events: stroke;         /* SVG only */
pointer-events: all;            /* SVG only */
/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;


none:元素永远不会成为鼠标事件的target (en-US)。但是,当其后代元素的 pointer-events 属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

我们加一下这个样式给到 iframe

pointer-events: none;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        iframe {
            width: 100%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <iframe src="./iframe.html" frameborder="0"></iframe>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" placeholder="请输入">
    <button>kaimo 提交</button>
</body>
</html>

加了之后就无法输入跟提交了。

cb3da31455be4864aec527f2f0b7b0c3.png

目录
相关文章
|
Web App开发 索引
正则表达式匹配域名、网址、url
DNS规定,域名中的标号都由英文字母和数字组成,每一个标号不超过63个字符,也不区分大小写字母。标号中除连字符(-)外不能使用其他的标点符号。级别最低的域名写在最左边,而级别最高的域名写在最右边。由多个标号组成的完整域名总共不超过255个字符。
30942 0
|
11月前
|
负载均衡 监控 Cloud Native
云原生架构下的微服务治理策略与实践####
在数字化转型浪潮中,企业纷纷拥抱云计算,而云原生架构作为其核心技术支撑,正引领着一场深刻的技术变革。本文聚焦于云原生环境下微服务架构的治理策略与实践,探讨如何通过精细化的服务管理、动态的流量调度、高效的故障恢复机制以及持续的监控优化,构建弹性、可靠且易于维护的分布式系统。我们将深入剖析微服务治理的核心要素,结合具体案例,揭示其在提升系统稳定性、扩展性和敏捷性方面的关键作用,为读者提供一套切实可行的云原生微服务治理指南。 ####
|
人工智能 自然语言处理 搜索推荐
阿里推出 AtomoVideo 高保真图生视频框架,兼容多种文生图模型
【2月更文挑战第17天】阿里推出 AtomoVideo 高保真图生视频框架,兼容多种文生图模型
1255 5
阿里推出 AtomoVideo 高保真图生视频框架,兼容多种文生图模型
|
11月前
|
存储 缓存 安全
在 Service Worker 中配置缓存策略
Service Worker 是一种可编程的网络代理,允许开发者控制网页如何加载资源。通过在 Service Worker 中配置缓存策略,可以优化应用性能,减少加载时间,提升用户体验。此策略涉及缓存的存储、更新和检索机制。
|
Java Apache
Apache PDFbox快速开发指南
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/9026439 Apache PDFbox快速开发指南 作者:chszs,转载需注明。
3097 0
|
定位技术 Android开发
在高德地图添加标注物,及点击标注物感应区域重叠问题
在高德地图添加标注物,及点击标注物感应区域重叠问题
491 0
|
消息中间件 网络协议 网络架构
3. BGP 实验(一):基础实验
3. BGP 实验(一):基础实验
|
缓存 NoSQL PHP
【PHP开发专栏】PHP缓存机制与实现
【4月更文挑战第29天】本文介绍了PHP缓存的基本概念、策略及实现方式。PHP缓存包括应用缓存、Web服务器缓存、数据库缓存和分布式缓存,常见策略有缓存预热、更新和懒加载。PHP的缓存实现包括文件缓存、APC、OPcache、Memcached和Redis。最佳实践包括缓存热点数据、控制粒度、设置失效策略、保证一致性和确保安全性。文中还提供了一个新闻列表和详情页的缓存实战示例,帮助开发者理解如何在实际项目中应用缓存。
376 1
|
机器学习/深度学习 人工智能 搜索推荐
AIGC有效提升病理诊断效率、缩短药品研发周期
【1月更文挑战第18天】AIGC有效提升病理诊断效率、缩短药品研发周期
417 2
AIGC有效提升病理诊断效率、缩短药品研发周期
|
应用服务中间件 Docker 容器
如何在Docker容器和主机之间复制文件/文件夹
如何在Docker容器和主机之间复制文件/文件夹