layer是一款近年來備受青睞的web彈層組件,她具有全方位的解決方案,致力於服務各水平段的開發人員,您的頁面會輕鬆地擁有豐富友好的操做體驗。
最近一個項目採用的是hui前端框架,他的彈出層就是用的layer插件,對於彈出層,有一個操做體驗你們都知道,就是關閉彈出層,須要刷新父頁面。開始寫的時候,我陷入了本身的誤區,在彈出層處理成功以後,我調用的是:前端
var index = parent.layer.getFrameIndex(window.name); parent.location.href=url; parent.layer.close(index);
這個地方是這樣寫也沒錯,可是若是這麼寫,它就只能被一個地方調用了,若是有多個地方調用的話,它不能返回原地址,而是重定向到新的url地址上去了。而恰好,在個人項目中間,某一個彈出層被兩個地方調用了,因此很明顯這種方案就不合適了,須要優化。百度了一下,找到以下兩種優化方案:
方案一:
在layer彈出層中調用父界面從新加載函數web
window.parent.location.reload(); var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
方案二:
調用layer插件的end回調方法:
end - 層銷燬後觸發的回調
類型:Function,默認:null
不管是確認仍是取消,只要層被銷燬了,end都會執行,不攜帶任何參數。前端框架
父窗口打開layer彈出框時,添加end回調服務器
function openLayer() { //iframe層 parent.layer.open({ type: 2, title: '修改', shadeClose: false, //點擊遮罩關閉 shade: 0.8, area: ['30%', '45%'], maxmin: true, closeBtn: 1, content: [url, 'yes'], //iframe的url,yes是否有滾動條 end: function () { location.reload(); } });
layer彈出框處理完成以後,就不須要調用其餘刷新操做函數了,直接關閉就好了框架
var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);
相比較而言,第一種方案會更佳,由於在操做邏輯上,手動關閉彈出框,應該不觸發刷新操做,只有當彈出框的處理邏輯執行成功後,調用函數關閉彈出框才觸發父界面刷新操做,基於這個邏輯,應該選擇方案一。方案二,無論怎樣都會刷新頁面,實際上無故的增長了服務器的處理壓力。函數