小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

artDialog-iframe Tools

 悟靜 2013-06-18
名稱 描述
核心方法
art.dialog.top 獲取artDialog可用最高層window對象。這與直接使用window.top不同,它能排除artDialog對象不存在已經(jīng)或者頂層頁面為框架集的情況
這是iframe應(yīng)用工具集中的核心方法,你可以用它來操作父頁面對象(包括上面的對話框)
art.dialog.data(name, value) 跨框架數(shù)據(jù)共享寫入接口。
框架與框架之間以及與主頁面之間進(jìn)行數(shù)據(jù)交換是非常頭疼的事情,常規(guī)情況下你必須知道框架的名稱才能進(jìn)行數(shù)據(jù)交換,如果是在復(fù)雜的多層框架下操作簡直就是噩夢。
而data方法就是為了解決這個問題,你完全不用管框架層級問題,它可以寫入任何類型的數(shù)據(jù),而做到各個頁面之間數(shù)據(jù)共享。
art.dialog.data(name) 跨框架數(shù)據(jù)共享讀取接口。指定name即返回數(shù)據(jù),任何引用了artDialog的頁面都有效
art.dialog.removeData(name) 跨框架數(shù)據(jù)共享刪除接口。刪除指定名稱的數(shù)據(jù),任何引用了artDialog的頁面都有效
異步數(shù)據(jù)對話框
art.dialog.open(url, options, cache) 創(chuàng)建一個iframe頁面
參數(shù): 地址, 配置參數(shù), 緩存開關(guān)(默認(rèn)true)
art.dialog.open.api iframe頁面獲取open方法擴(kuò)展方法。
(注意這個iframe中也必須引用artDialog腳本文件)
art.dialog.opener iframe頁面獲取open方法觸發(fā)來源頁面window對象。
(注意這個iframe中也必須引用artDialog腳本文件)
art.dialog.close() iframe頁面關(guān)閉open方法創(chuàng)建的對話框的快捷方式。
close方法等同于:
var api = art.dialog.open.api;
api && api.close();

(注意這個iframe中也必須引用artDialog腳本文件)
art.dialog.load(url, options, cache) Ajax加載內(nèi)容
參數(shù):地址, 配置參數(shù), 緩存開關(guān)(默認(rèn)true)
基礎(chǔ)交互對話框
art.dialog.alert(content) 警告消息 (同時只允許一個alert)
參數(shù): 內(nèi)容
art.dialog.confirm(content, ok, cancel) 確認(rèn) (同時只允許一個confirm)
參數(shù): 內(nèi)容, 確定按鈕回調(diào)函數(shù), 取消按鈕回調(diào)函數(shù)
art.dialog.prompt(content, ok, value) 提問 (同時只允許一個prompt)
參數(shù): 內(nèi)容, 確定按鈕回調(diào)函數(shù), 文本框默認(rèn)值
art.dialog.tips(content, time) 短暫提示(同時只允許一個tips)
參數(shù): 內(nèi)容、顯示時間(單位秒, 默認(rèn)1.5)
自定義
art.dialog.through(options) 創(chuàng)建一個普通可穿越框架的對話框
不鼓勵直接使用window.top這樣的方式穿越,這樣可能因?yàn)閷υ捒蛴|發(fā)頁面重置導(dǎo)致其創(chuàng)建的對象在內(nèi)存中被清空而發(fā)生異常
  1. 頂層面需要引用了artDialog才能實(shí)現(xiàn)穿越框架
  2. chrome瀏覽器本地運(yùn)行會有安全限制,請在服務(wù)器上查看本頁面
  3. artDialog不支持怪異模式,請用主流網(wǎng)站采用的XHTML1.0或者HTML5的DOCTYPE申明,如:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
    或者
    <!DOCTYPE HTML>

獲取artDialog可用頂層頁面window對象[top]

art.dialog.top默認(rèn)引用的是widnow.top(如果window.top是框架集、跨域、artDialog對象不存,否則可能為window.parent或者當(dāng)前window)這里頁面所有穿越的對話框最終是在這個window上。

var win = art.dialog.top;
win.document.title = '我修改了頁面標(biāo)題';
win.document.getElementById('testInput').value = 'hello world!';

可穿越框架的標(biāo)準(zhǔn)對話框[through]

如果iframe刷新或者被關(guān)閉,它創(chuàng)建的對話框會自動回收,防止因內(nèi)存清空而導(dǎo)致錯誤。不鼓勵直接使用window.top.art.dialog()與art.dialog.top.art.dialog()這樣的方式穿越框架,它們會帶來潛在的錯誤。

var throughBox = art.dialog.through;
throughBox({
    content: '我是一個普通的對話框,只是能穿越框架而已',
    lock: true
});

嵌入網(wǎng)頁[open]

同域下能夠自適應(yīng)iframe大小,但chrome 瀏覽器本地運(yùn)行會認(rèn)為跨域而無法適應(yīng)大小

open方法有如下這幾個私有個功能

名稱 類型 描述
iframe內(nèi)部靜態(tài)方法
art.dialog.open.api Object 從iframe頁面引用對話框擴(kuò)展方法
art.dialog.opener object Window 從iframe頁面引用對話框觸發(fā)頁面的window
擴(kuò)展方法
iframe HTMLElement 引用open創(chuàng)建的iframe(4.0.1新增)

其他擴(kuò)展方法:API.html#API

一、使用iframe內(nèi)部腳本控制對話框

請打開 login_iframe.html 查看源碼

art.dialog.open('login_iframe.html', {title: '提示'});

google maps (示例來自KindEditor)

art.dialog.open('googleMaps.html');

二、在外部對iframe進(jìn)行控制

對iframe控制需要用到open私有的this.iframe擴(kuò)展方法:

art.dialog.open('login_iframe_2.html', {
    title: '登錄',
    // 在open()方法中,init會等待iframe加載完畢后執(zhí)行
    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
});

// 表單驗(yàn)證
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();
};

三、跨域訪問

跨域訪問無法自適應(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});

框架與框架、主頁面數(shù)據(jù)共享[data & removeData]

框架與框架之間以及與主頁面之間進(jìn)行數(shù)據(jù)交換是非常頭疼的事情,常規(guī)情況下你必須知道框架的名稱才能進(jìn)行數(shù)據(jù)交換,如果是在復(fù)雜的多層框架下操作簡直就是開發(fā)人員噩夢,而這樣的問題在CMS多框架應(yīng)用中十分常見。

在artDialog中這一切完全被簡化,它有一個簡單易用的數(shù)據(jù)共享接口,可以共享任意類型的數(shù)據(jù)供各個框架頁面讀取,它與頁面名稱、層級毫無關(guān)系。相關(guān)原理

請打開 iframeA.html 源碼查看范例。由于art.dialog.open方法打開的iframe加劇了框架的層級的復(fù)雜性,所以請?zhí)貏e重視這個data方法!

art.dialog.data('test', document.getElementById('demoInput04-3').value);
art.dialog.open('iframeA.html', null, false);

// 此時 iframeA.html 頁面可以使用 art.dialog.data('test') 獲取到數(shù)據(jù),如:
// document.getElementById('aInput').value = art.dialog.data('test');

(請輸入測試文字)

Ajax[load]

特別說明:第三個參數(shù)為ajax緩存開關(guān),默認(rèn)為true。由于瀏覽器限制,ajax需要在服務(wù)端運(yùn)行才能正確運(yùn)行本例子。

一、加載網(wǎng)頁片段

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);

警告消息[alert]

art.dialog.alert('警察叔叔會請你喝茶!');

確認(rèn)消息[confirm]

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('你取消了操作');
});

提問消息[prompt]

特別說明:回調(diào)函數(shù)第一個參數(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;
}, '我是糖餅');

提示消息[tips]

art.dialog.tips('提交成功!', 1.5);

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多