layer弹出层 iframe层去掉滚动条的实例代码

layer弹出层是一种非常方便的UI组件，可以用来展示内容、完成操作等等。在使用layer弹出层时，有时候需要在弹出层里嵌入一个iframe，来展示一段HTML页面。但是默认情况下，这个iframe会有滚动条，影响美观和使用体验。那么如何去掉这个滚动条呢？本文将提供一个实验代码，供大家参考。

HTML代码：

<button class="btn">点击弹出层</button>
<div id="demo" style="display:none">
  <iframe frameborder="0" scrolling="no" width="600" height="400" src="demo.html"></iframe>
</div>

JS代码：

layui.use(['layer'], function(){
  var layer = layui.layer;
  $(".btn").click(function(){
    layer.open({
      type: 1,
      title: '弹出层',
      area:["600px","400px"],
      content:$('#demo'),
      success:function(layero, index){
        //获取iframe窗口
        var iframeWin = window[layero.find('iframe')[0]['name']];
        //禁用iframe窗口滚动条
        iframeWin.document.body.style.overflow="hidden";
      }
    });
  })
})

在这个代码中，我们使用了Layui这个UI库，其中的layer弹出层组件。当点击按钮时，我们使用layer.open()方法弹出一个新的弹出层窗口。其中type指定弹出层类型为1（页面层），title可以指定弹出层的标题，area指定弹出层的宽度和高度，content指定弹出层要展示的内容，这里是一个嵌入了一个iframe的DIV。

在弹出层成功打开后，我们使用了一个success回调函数来获取iframe窗口，并禁用了它的滚动条。具体做法是，我们先通过layero.find('iframe')[0]取到iframe DOM元素，再通过window[element.name]取到iframe窗口对象，最后找到它的document.body并设置它的overflow属性为hidden即可。

需要注意的是，这种方法仅适用于在同域名下加载iframe页面，如果要在不同域名下加载，由于浏览器的安全策略，禁止直接修改iframe的内容和样式。此时需要在iframe页面中添加对应的JS代码来禁用滚动条，或者使用其他第三方插件来实现滚动条的去除。