easyui dialog實現操作iframe內元素
阿新 • • 發佈:2019-01-27
//js封裝的dialog用iframe的方式實現 var js={dialog:'',iframe:{}}; js.showWindow=function (title,url,width,height,model,func) { var uuid=js.uuid(); var iframe="iframe"+uuid; var dialog="dialog"+uuid; js.iframe=iframe; js.dialog=dialog; var content = '<iframe id="'+iframe+'" name="iframe'+uuid+'" src="' + url + '" width="100%" height="98%" frameborder="0" scrolling="no"></iframe>'; $("<div id='"+dialog+"'></div>").dialog({ title: title, iconCls:'icon-window', width: width, height: height, closed: true, cache: false, minimizable:true, maximizable:true, collapsible:true, resizable:true, content:content, // url:url, modal: model, onMove:function(){ }, onMinimize:function(){ alert(123); }, onClose:function(){ $("#"+dialog).dialog('destroy') }, buttons:[{ iconCls:'icon-ok', text:'確定', handler:function () { func() //iframe.SubmitForm() } },{ iconCls:'icon-quxiao', text:'取消', handler:function(){ $("#"+dialog).dialog('destroy'); } }] }); js.iframe=window.frames[iframe]; }; js.uuid=function () { var d = new Date().getTime(); var uuid = 'bxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = (d + Math.random()*16)%16 | 0; d = Math.floor(d/16); return (c=='x' ? r : (r&0x3|0x8)).toString(16); }); return uuid; };
//這是父頁面要通過dialog呼叫子頁面的 SubmitForm方法 function add() { var data=g.treegrid('getSelected'); var pid; if(!data){ pid=0; }else{ pid=data.id; } js.showWindow('選單新增','{:url("admin/auth/menu_add")}?pid='+pid,800,600,false,function () { js.iframe.SubmitForm(); }); }
<form id="fm" method="post" action="{:url('auth/menu_save',['pid'=>$pid])}" novalidate style="margin:0;padding:20px 50px;float: left" > <div style="margin-bottom:10px"> <input name="name" class="easyui-textbox" required="true" label="選單名稱:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="app" class="easyui-textbox" required="true" label="應用名稱:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="controller" class="easyui-textbox" label="控制器:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="action" class="easyui-textbox" label="方法:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="js_action" class="easyui-textbox" label="js方法:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <select class="easyui-combobox" name="type" required="true" style="width:100%" label="是否為選單"> <option value="">請選擇</option> <option value="1">只顯示為選單</option> <option value="2">許可權選單</option> <option value="3">按鈕</option> </select> </div> <div style="margin-bottom:10px"> <select class="easyui-combobox" name="is_show" required="true" style="width:100%" label="是否顯示"> <option value="">請選擇</option> <option value="1">顯示</option> <option value="2">不顯示</option> </select> </div> <div style="margin-bottom:10px"> <input name="icon" class="easyui-textbox" label="圖示:" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="sort" class="easyui-textbox" required="true" label="排序:" value="999" style="width: 100%"> </div> <div style="margin-bottom:10px"> <input name="pid" class="easyui-textbox" required="true" label="上級選單ID:" value="{$pid}" style="width: 100%"> </div> </form> <script> //獲取父節點 function SubmitForm(){ $("#fm").form('submit', { url:"{:url('auth/menu_add')}", onSubmit: function(){ var isValid = $(this).form('validate'); return isValid; // return false will stop the form submission }, success: function(data){ var data=eval('(' + data + ')'); if(data.success){ layer.msg(data.message); } } }); } </script> /**iframe載入的子頁面***/
1.//根據iframe的id獲取物件
2.var i1 = window.frames['iframeId'];
3.//var iframe =window.frames[0];也可以
4.//獲取iframe中的元素值
5.var val=i1.document.getElementById("t1").value
//根據iframe的id獲取物件
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value
蛋疼的一晚上想到這種形式去實現,寫完睡覺了!!!