怎么禁止iframe里的元素输入跟操作？
Posted 凯小默
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么禁止iframe里的元素输入跟操作？相关的知识，希望对你有一定的参考价值。
问题
比如我需要禁止用户输入数据，去进行提交操作
解决
我们可以使用 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>
加了之后就无法输入跟提交了。
以上是关于怎么禁止iframe里的元素输入跟操作？的主要内容，如果未能解决你的问题，请参考以下文章