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