前端-解决IE浏览器下iframe中出现多余的滚动条问题

Posted 2023-05-15

参考技术A        如上图红色区域所示可以看到，在IE浏览器下会出现这样的多余滚动条。由于这个页面是用iframe标签嵌入的，所以直接用IE的调试工具是无法解析内部的结构的。

处理方案：

方案一：给iframe标签增加css属性，display: block;

方案二：在chrome浏览器下打开iframe内部的页面，通过查看调试者工具可以看到iframe内部的结构

从图中可以看到html的位置有添加一个overflow:scroll的属性，这个属性会自动为页面添加一个滚动条。因此，去掉该属性之后，问题就得到解决了。

在IFrame中使用postMessage跨域

参考技术A 我们在前端页面开发中，常常会用到iframe。
而且我们在使用iframe的时候，大多数情况下不单单只是为了显示页面，还要与父窗口进行交互，这时候就出现了跨域问题，iframe页面并不能直接操作父窗口的元素。
我们可以使用html5的postMessage()解决这个问题。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指相同的域名、协议和端口，只要其中一项不同就为跨域。
举几个例子：

只有父窗口是 http://a.123.com:8080 时才会接受到传递的消息。