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