artDialog-iframeTools
名称 | 描述 |
核心方法 | |
p | 获取artDialog可用最高层window对象。这与直接使用p不同,它能排除artDialog对象不存在已经或者顶层页面为框架集的情况 这是iframe应用工具集中的核心方法,你可以用它来操作父页面对象(包括上面的对话框) |
art.dialog.data(name, value) | 跨框架数据共享写入接口。 框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是噩梦。 而data方法就是为了解决这个问题,你完全不用管框架层级问题,它可以写入任何类型的数据,而做到各个页面之间数据共享。 |
art.dialog.data(name) | 跨框架数据共享读取接口。指定name即返回数据,任何引用了artDialog的页面都有效 |
veData(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脚本文件) iframe参数传递 |
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) 参数: 内容 |
firm(content, ok, cancel) | 确认 (同时只允许一个confirm) 参数: 内容, 确定按钮回调函数, 取消按钮回调函数 |
art.dialog.prompt(content, ok, value) | 提问 (同时只允许一个prompt) 参数: 内容, 确定按钮回调函数, 文本框默认值 |
art.dialog.tips(content, time) | 短暂提示(同时只允许一个tips) 参数: 内容、显示时间(单位秒, 默认1.5) |
自定义 | |
art.dialog.through(options) | 创建一个普通可穿越框架的对话框 不鼓励直接使用p这样的方式穿越,这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常 |
1.顶层面需要引用了artDialog才能实现穿越框架
2.chrome浏览器本地运行会有安全限制,请在服务器上查看本页面
3.artDialog不支持怪异模式,请用主流网站采用的XHTML1.0或者HTML5的DOCTYPE申明,如:
4.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5.或者
6.<!DOCTYPE HTML>
获取artDialog可用顶层页面window对象[top]
p默认引用的是p(如果p是框架集、跨域、artDialog对象不存,否则可能为window.parent或者当前window)这里页面所有穿越的对话框最终是在这个window上。
var win = p;
win.document.title = '我修改了页面标题';
ElementById('testInput').value = 'hello world!';
可穿越框架的标准对话框[through]
如果iframe刷新或者被关闭,它创建的对话框会自动回收,防止因内存清空而导致错误。不鼓励直接使用p.art.dialog()与p.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.tWindow;
var top = p;// 引用顶层页面window对象
var username = ElementById('login-form-username');
username.value = 'guest';
setTimeout(function () {
username.select();
}, 80);
top.document.title = '测试';
},
ok: function () {
var iframe = this.tWindow;
if (!iframe.document.body) {
alert('iframe还没加载完毕呢')
return false;
};
var form = ElementById('login-form'),
username = ElementById('login-form-username'),
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论