artDialog-iframeTools

artDialog-iframeTools

名称描述

核心方法

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这样的方式穿越，这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常

1.顶层面需要引用了artDialog才能实现穿越框架

2.chrome浏览器本地运行会有安全限制，请在服务器上查看本页面

3.artDialog不支持怪异模式，请用主流网站采用的XHTML1.0或者HTML5的DOCTYPE申明，如：

4.

5.或者

6.

获取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: '登录',

// 在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('https://www.360docs.net/doc/7219308316.html,/igadget/re nren/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);

// 此时 iframeA.html 页面可以使用 art.dialog.data('test') 获取到数据，如：

// document.getElementById('aInput').value = art.dialog.data('test');

（请输入测试文字）

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 = '';

}, function(){

art.dialog.tips('你取消了操作');

});

提问消息[prompt]

特别说明：回调函数第一个参数为输入的值

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;

}, '我是糖饼');

提示消息[tips]

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