iframe

### 引入 JS 代码 ```html <script type="text/javascript" src="../../../js/jetpl.js"></script> ``` ### 新建子页面 ```html <iframe width="100%" height="600px" style="border:0;" src="" frameborder="0" id="childFrame"></iframe> ``` ```javascript var urlData = JSON.stringify(data); // 要传过去的data, 如果是数组或者对象, 需要转JSON $('#childFrame').attr('src', "childFrame.html?data=" + urlData + "&id=" + id); // 设置页面 ``` ```javascript // 获取父级页面传来的数据 var data = JSON.parse(urlParams["data"]); var id = urlParams["id"]; ``` ### 页面通信 #### 子传父 ```javascript // 父页面方法, 需写在load外面 function getWareData(data) { if (data) { // data为子页面传来的数据 // 下一步操作 } } // 子页面调用父页面方法 window.parent.getWareData(data); // 这个data为子页面中的值 ``` #### 父传子 ```javascript var childFrame = document.getElementById("childFrame"); childFrame.contentWindow.data = data // 可以直接修改子页面的参数,或者方法 ``` ### 可操作弹窗形式 打开子页面, layer.open()多加按钮相关的参数 ```JavaScript layer.open({ type: 2, content: ['page.html'], btn: ['确认', '取消'], // 可更改 btnAlign: 'c', yes: function (index, layero) { // 确认操作, 调用子页面的 save 按钮 var submit = layero.find('iframe').contents().find('#save'); submit.trigger('click'); }, btn2: function (index, layero) { // 取消操作, 一般是关闭 layer.closeAll(); }, }) ``` 子页面的 save 按钮要隐藏 ```html <span id="save" style="display: none">保存</span> ```