名稱 | 描述 | ||
---|---|---|---|
art.dialog.top | 獲取artDialog可用最高層window對象。這與直接使用window.top不同,它能排除artDialog對象不存在已經或者頂層頁面為框架集的情況 這是iframe應用工具集中的核心方法,你可以用它來操作父頁面對象(包括上面的對話框) | ||
art.dialog.data(name, value) | 跨框架數據共享寫入接口。 框架與框架之間以及與主頁面之間進行數據交換是非常頭疼的事情,常規情況下你必須知道框架的名稱才能進行數據交換,如果是在復雜的多層框架下操作簡直就是噩夢。 而data方法就是為了解決這個問題,你完全不用管框架層級問題,它可以寫入任何類型的數據,而做到各個頁面之間數據共享。 | ||
art.dialog.data(name) | 跨框架數據共享讀取接口。指定name即返回數據,任何引用了artDialog的頁面都有效 | ||
art.dialog.removeData(name) | 跨框架數據共享刪除接口。刪除指定名稱的數據,任何引用了artDialog的頁面都有效 | ||
art.dialog.open(url, options, cache) | 創建一個iframe頁面 參數: 地址, 配置參數, 緩存開關(默認true) | ||
art.dialog.open.api | iframe頁面獲取open方法擴展方法。 (注意這個iframe中也必須引用artDialog腳本文件) | ||
art.dialog.opener | iframe頁面獲取open方法觸發來源頁面window對象。 (注意這個iframe中也必須引用artDialog腳本文件) | ||
art.dialog.close() | iframe頁面關閉open方法創建的對話框的快捷方式。 close方法等同于: var api = art.dialog.open.api; api && api.close(); (注意這個iframe中也必須引用artDialog腳本文件) | ||
art.dialog.load(url, options, cache) | Ajax加載內容 參數:地址, 配置參數, 緩存開關(默認true) | ||
art.dialog.alert(content) | 警告消息 (同時只允許一個alert) 參數: 內容 | ||
art.dialog.confirm(content, ok, cancel) | 確認 (同時只允許一個confirm) 參數: 內容, 確定按鈕回調函數, 取消按鈕回調函數 | ||
art.dialog.prompt(content, ok, value) | 提問 (同時只允許一個prompt) 參數: 內容, 確定按鈕回調函數, 文本框默認值 | ||
art.dialog.tips(content, time) | 短暫提示(同時只允許一個tips) 參數: 內容、顯示時間(單位秒, 默認1.5) | ||
art.dialog.through(options) | 創建一個普通可穿越框架的對話框 不鼓勵直接使用window.top這樣的方式穿越,這樣可能因為對話框觸發頁面重置導致其創建的對象在內存中被清空而發生異常 |
var win = art.dialog.top;win.document.title = '我修改了頁面標題';win.document.getElementById('testInput').value = 'hello world!';
如果iframe刷新或者被關閉,它創建的對話框會自動回收,防止因內存清空而導致錯誤。不鼓勵直接使用window.top.art.dialog()與art.dialog.top.art.dialog()這樣的方式穿越框架,它們會帶來潛在的錯誤。
var throughBox = art.dialog.through;throughBox({ content: '我是一個普通的對話框,只是能穿越框架而已', lock: true});
同域下能夠自適應iframe大小,但chrome 瀏覽器本地運行會認為跨域而無法適應大小
open方法有如下這幾個私有個功能
名稱 | 類型 | 描述 | ||
---|---|---|---|---|
iframe內部靜態方法 | ||||
art.dialog.open.api | Object | 從iframe頁面引用對話框擴展方法 | ||
art.dialog.opener | object Window | 從iframe頁面引用對話框觸發頁面的window | ||
iframe | HTMLElement | 引用open創建的iframe(4.0.1新增) |
其他擴展方法:API.html#API
請打開 login_iframe.html 查看源碼
art.dialog.open('login_iframe.html', {title: '提示'});
google maps (示例來自KindEditor)
art.dialog.open('googleMaps.html');
對iframe控制需要用到open私有的this.iframe擴展方法:
art.dialog.open('login_iframe_2.html', { title: '登錄', // 在open()方法中,init會等待iframe加載完畢后執行 init: function () { var iframe = this.iframe.contentWindow; var top = art.dialog.top;// 引用頂層頁面window對象 var username = iframe.document.getElementById('login-form-username'); username.value = 'guest'; setTimeout(function () { username.select(); }, 80); top.document.title = '測試'; }, ok: function () { var iframe = this.iframe.contentWindow; if (!iframe.document.body) { alert('iframe還沒加載完畢呢') return false; }; var form = iframe.document.getElementById('login-form'), username = iframe.document.getElementById('login-form-username'), password = iframe.document.getElementById('login-form-password'); if (check(username) && check(password)) form.submit(); return false; }, cancel: true});// 表單驗證var check = function (input) { if (input.value === '') { inputError(input); input.focus(); return false; } else { return true; };};// 輸入錯誤提示var inputError = function (input) { clearTimeout(inputError.timer); var num = 0; var fn = function () { inputError.timer = setTimeout(function () { input.className = input.className === '' ? 'login-form-error' : ''; if (num === 5) { input.className === ''; } else { fn(num ++); }; }, 150); }; fn();};
跨域訪問無法自適應大小,也無法進行父頁面與子頁面數據交換
art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html', {title: '人人網', width: 320, height: 400});
框架與框架之間以及與主頁面之間進行數據交換是非常頭疼的事情,常規情況下你必須知道框架的名稱才能進行數據交換,如果是在復雜的多層框架下操作簡直就是開發人員噩夢,而這樣的問題在CMS多框架應用中十分常見。
在artDialog中這一切完全被簡化,它有一個簡單易用的數據共享接口,可以共享任意類型的數據供各個框架頁面讀取,它與頁面名稱、層級毫無關系。相關原理
請打開 iframeA.html 源碼查看范例。由于art.dialog.open方法打開的iframe加劇了框架的層級的復雜性,所以請特別重視這個data方法!
art.dialog.data('test', document.getElementById('demoInput04-3').value);art.dialog.open('iframeA.html', null, false);// 此時 iframeA.html 頁面可以使用 art.dialog.data('test') 獲取到數據,如:// document.getElementById('aInput').value = art.dialog.data('test');
特別說明:第三個參數為ajax緩存開關,默認為true。由于瀏覽器限制,ajax需要在服務端運行才能正確運行本例子。
art.dialog.load('./ajaxContent/content.html', { title: '遠程載入HTML片段', ok: function(topWin){ art.dialog('hello world'); }, close: function(){ art.dialog.tips('close') }}, false);
art.dialog.load('./ajaxContent/login.html', false);
art.dialog.alert('警察叔叔會請你喝茶!');
art.dialog.confirm('你確認刪除操作?', function(){ var top = art.dialog.top, input = document.getElementById('demoInput02'), photo = top.document.getElementById('photo'); if (input) input.parentNode.removeChild(input); if (photo) photo.innerHTML = '<img src="images/lixiaolong.png" />';}, function(){ art.dialog.tips('你取消了操作');});
特別說明:回調函數第一個參數為輸入的值
art.dialog.prompt('你的名字是什么?', function(data){ // data 代表輸入數據; var input = document.getElementById('demoInput03'), topVal = art.dialog.top.document.getElementById('testInput'); if (input) input.value = data; if (topVal) topVal.value = data;}, '我是糖餅');
art.dialog.tips('提交成功!', 1.5);