init

public/frontend/layui-main/docs/layer/examples/iframe.md

@@ -0,0 +1,75 @@
+<div class="layui-btn-container">
+  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
+    iframe 的父子操作
+    <span id="ID-test-iframe-mark"></span>
+  </button>
+  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
+  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
+  <button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
+</div>
+
+<!-- import layui --> 
+<script>
+layui.use(function(){
+  var $ = layui.$;
+  var layer = layui.layer;
+  var util = layui.util;
+
+  // 事件
+  util.on('lay-on', {
+    'test-iframe-handle': function(){
+      layer.open({
+        type: 2,
+        area: ['680px', '520px'],
+        content: '/layer/test/iframe.html',
+        fixed: false, // 不固定
+        maxmin: true,
+        shadeClose: true,
+        btn: ['获取表单值', '取消'],
+        btnAlign: 'c',
+        yes: function(index, layero){
+          // 获取 iframe 的窗口对象
+          var iframeWin =  window[layero.find('iframe')[0]['name']];
+          var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
+          var value = elemMark.val();
+          
+          if($.trim(value) === '') return elemMark.focus();
+
+          // 显示获得的值
+          layer.msg('获得 iframe 中的输入框标记值：'+ value);
+        }
+      });
+    },
+    'test-iframe-video': function(){
+      layer.open({
+        type: 2,
+        title: false,
+        area: ['630px', '360px'],
+        shade: 0.8,
+        closeBtn: 0,
+        shadeClose: true,
+        content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
+      });
+      layer.msg('点击遮罩区域可关闭');
+    },
+    'test-iframe-overflow': function(){
+      layer.open({
+        type: 2,
+        area: ['360px', '500px'],
+        skin: 'layui-layer-rim', // 加上边框
+        content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
+      });
+    },
+    'test-iframe-curl': function(){
+      layer.open({
+        type: 2,
+        title: 'iframe 任意 URL',
+        shadeClose: true,
+        maxmin: true, //开启最大化最小化按钮
+        area: ['900px', '600px'],
+        content: 'https://cn.bing.com/'
+      });
+    }
+  })
+});
+</script>