layui的layer iframe禁止縮放拖拽

彈層組件文檔 - layui.layer

layer 至今仍作為 layui 的代表作，她的受眾廣泛並非偶然，而是這數年來的堅持、不棄的執念，將那些不屑的眼光轉化為應得的尊重，不斷完善和維護、不斷建設和提升社區服務，在 Web 開發者的圈子里口口相傳，乃至於成為今天的 layui 最強勁的源動力。目前， layer已成為國內最多人使用的 Web 彈層組件， GitHub 自然Stars 5000+，官網累計下載量達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文檔