获取artDialog可用顶层页面window对象[top]
art.dialog.top默认引用的是widnow.top(如果window.top是框架集、跨域、artDialog对象不存,否则可能为window.parent或者当前window)这里页面所有穿越的对话框最终是在这个window上。
var win = art.dialog.top;
win.document.title = '我修改了页面标题';
win.document.getElementById('testInput').value = 'hello world!';
可穿越框架的标准对话框[through]
如果iframe刷新或者被关闭,它创建的对话框会自动回收,防止因内存清空而导致错误。不鼓励直接使用window.top.art.dialog()与art.dialog.top.art.dialog()这样的方式穿越框架,它们会带来潜在的错误。
var throughBox = art.dialog.through;
throughBox({
content: '我是一个普通的对话框,只是能穿越框架而已',
lock: true
});
嵌入网页[open]
同域下能够自适应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
一、使用iframe内部脚本控制对话框
请打开 login_iframe.html 查看源码
art.dialog.open('login_iframe.html', {title: '提示'});
google maps (示例来自KindEditor)
art.dialog.open('googleMaps.html');
二、在外部对iframe进行控制
对iframe控制需要用到open私有的this.iframe扩展方法:
art.dialog.open('login_iframe_2.html', {
title: '登录',
init: function () {
var iframe = this.iframe.contentWindow;
var top = art.dialog.top;
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});
框架与框架、主页面数据共享[data
& removeData]
框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是开发人员噩梦,而这样的问题在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);
(请输入测试文字)
Ajax[load]
特别说明:第三个参数为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);
警告消息[alert]
art.dialog.alert('警察叔叔会请你喝茶!');
确认消息[confirm]
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('你取消了操作');
});
提问消息[prompt]
特别说明:回调函数第一个参数为输入的值
art.dialog.prompt('你的名字是什么?', function(data){
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);