iframe.html 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>镜像站@layer iframe 示例</title>
  6. <link rel="stylesheet" href="../../../res.layui.com/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css" media="all">
  7. <style>
  8. body{padding:10px; font-size:14px; background:#fff; width:95%; margin:0 auto; font-size:14px; line-height:20px; overflow:hidden;}
  9. p{margin-bottom:10px;}
  10. input{border:1px solid #999; padding:5px 10px; margin:0 10px 10px 0;}
  11. </style>
  12. </head>
  13. <body>
  14. <div>
  15. <strong><label>请在关闭该层之前留个标记:</label></strong>
  16. <div class="layui-inline">
  17. <input class="layui-input" id="name">
  18. </div>
  19. </div>
  20. <p class="layui-text">
  21. 这是一个新的页面,您可以通过父窗口得到这里的DOM(点击右上角关闭按钮试试),从而操作这里的一切。
  22. <br>当然,也可以在这里操作父窗口。
  23. </p>
  24. </div>
  25. <pre class="layui-code" style="height: 180px; overflow: auto;">
  26. <span class="run">//注意:parent 是 JS 自带的全局对象,可用于操作父页面
  27. var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
  28. //让层自适应iframe
  29. $('#add').on('click', function(){
  30. $('body').append('插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。插入很多酱油。');
  31. parent.layer.iframeAuto(index);
  32. });
  33. //在父层弹出一个层
  34. $('#new').on('click', function(){
  35. parent.layer.msg('Hi, man', {shade: 0.3})
  36. });
  37. //给父页面传值
  38. $('#transmit').on('click', function(){
  39. parent.$('#parentIframe').text('我被改变了');
  40. parent.layer.tips('Look here', '#parentIframe', {time: 5000});
  41. parent.layer.close(index);
  42. });
  43. //关闭iframe
  44. $('#closeIframe').click(function(){
  45. var val = $('#name').val();
  46. if(val === ''){
  47. parent.layer.msg('请填写标记');
  48. return;
  49. }
  50. parent.layer.msg('您将标记 [ ' +val + ' ] 成功传送给了父窗口');
  51. parent.layer.close(index);
  52. });
  53. </span>
  54. </pre>
  55. <div>
  56. <button class="layui-btn layui-btn-primary" id="add">让层自适应iframe</button>
  57. <button class="layui-btn layui-btn-primary" id="new">在父层弹出一个层</button>
  58. <button class="layui-btn layui-btn-primary" id="transmit">给父页面传值</button>
  59. <button class="layui-btn layui-btn-primary" id="closeIframe">关闭iframe</button>
  60. </div>
  61. <script src="../../../other/jquery/1.12.3/jquery.min.js" tppabs="http://cdn.staticfile.org/jquery/1.12.3/jquery.min.js"></script>
  62. <script>
  63. new Function($('.run').text())()
  64. //var index = parent.layer.getFrameIndex(window.name);
  65. //parent.layer.iframeAuto(index);
  66. </script>
  67. </body>
  68. </html>