layui的layer iframe禁止缩放拖拽

弹层组件文档 - layui.layer

layer 至今仍作为 layui 的代表作，她的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer已成为国内最多人使用的 Web 弹层组件，GitHub 自然Stars5000+，官网累计下载量达50w+，大概有30万不同规模的 Web 平台使用过 layer。

上述介绍引自layui官网介绍

今天需要用到layer弹出一个iframe窗，直接从layer官网上copy过来这么一段

1. //iframe窗

2. layer.open({
3. type: 2,
4. title: false,
5. closeBtn: 0, //不显示关闭按钮
6. shade: [0],
7. area: ['340px', '215px'],
8. offset: 'rb', //右下角弹出
9. time: 2000, //2秒后自动关闭
10. anim: 2,
11. content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
12. end: function(){ //此处用于演示
13. layer.open({
14. type: 2,
15. title: '很多时候，我们想最大化看，比如像这个页面。',
16. shadeClose: true,
17. shade: false,
18. maxmin: true, //开启最大化最小化按钮
19. area: ['893px', '600px'],
20. content: '//fly.layui.com/'
21. });
22. }
23. });

发现在这一段代码设置之后，弹出的iframe中有一些问题：

1、可以自由拖拽在页面内移动；

2、我在iframe中展示页面的文字颜色出现问题；

3、还有iframe页面的大小不理想；

4、iframe窗口默认情况会允许缩放延伸。

好吧，我也没指望引入的例子刚好满足我，那么久找方法去修改呗，网上搜索到的感觉还是有点乱，感觉没有专门讲这个的，不会很细，所以我的问题网上搜索，没解决，这也是我写下这篇博客的原因。

要知道无论你用什么插件或者框架，最好的解决方法就是看文档！！！

是因为我之前看的旧的layer文档，真的是，大家引以为戒，看最新的文档最好是。

来解决问题开始：

1、

move - 触发拖动的元素

类型：String/DOM/Boolean，默认：'.layui-layer-title'

默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽；

2、字体颜色的话我直接加了个class，覆盖上去；

3、area - 宽高

类型：String/Array，默认：'auto'

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']。

4、resize - 是否允许拉伸

类型：Boolean，默认：true

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 resize:false即可。该参数对loading、tips层无效

大家有其他的问题的话可以多看看文档layer文档