大家有时候遇到的了一个div的区域嵌入iframe代码目的是获取其他的第三方的网站信息，但是我 们在操作点击这个div中的iframe却不能点击或者点击无反应，接下来就由sky8g作者我给大家讲讲如何解决这样的问题？
下面是html代码
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>欢迎来到sky8g网站</title> <link rel="stylesheet" href=""> </head> <body> <div id="sky8g" style="background: beige;"> <iframe src="https://baidu.com" width="500px" height="500px" ></iframe> </div> </body> </html> |
下面我们在写个js代码放到id为sky8g的div结束标签下面。
| 1 2 3 4 5 | <script type="text/javascript"> document.getElementsByTagName('sky8g').onclick=function(){ console.log('这是点击的是iframe'); } </script> |
但是我们点击后没有反应， 如何解决呢？
解决办法：给iframe标签添加样式pointer-events: none;
| 1 2 3 4 5 | <style type="text/css" media="screen"> #sky8g iframe{ pointer-events: none; } </style> |
当你带点击了iframe就能触发了，需要给iframe添加样式。