artDialogiframe Tools
来源:互联网 发布:js 设置dialog button 编辑:程序博客网 时间:2024/06/18 09:04
这是iframe应用工具集中的核心方法,你可以用它来操作父页面对象(包括上面的对话框)
框架与框架之间以及与主页面之间进行数据交换是非常头疼的事情,常规情况下你必须知道框架的名称才能进行数据交换,如果是在复杂的多层框架下操作简直就是噩梦。
而data方法就是为了解决这个问题,你完全不用管框架层级问题,它可以写入任何类型的数据,而做到各个页面之间数据共享。
参数: 地址, 配置参数, 缓存开关(默认true)
(注意这个iframe中也必须引用artDialog脚本文件)
(注意这个iframe中也必须引用artDialog脚本文件)
close方法等同于:
var api = art.dialog.open.api;
api && api.close();
(注意这个iframe中也必须引用artDialog脚本文件)
参数:地址, 配置参数, 缓存开关(默认true)
参数: 内容, 对话框关闭后的回调函数
参数: 内容, 确定按钮回调函数, 取消按钮回调函数
参数: 内容, 确定按钮回调函数, 文本框默认值
参数: 内容、显示时间(单位秒, 默认1.5)
不鼓励直接使用window.top这样的方式穿越,这样可能因为对话框触发页面重置导致其创建的对象在内存中被清空而发生异常
- 顶层面需要引用了artDialog才能实现穿越框架
- chrome浏览器本地运行会有安全限制,请在服务器上查看本页面
- artDialog不支持怪异模式,请用主流网站采用的XHTML1.0或者HTML5的DOCTYPE申明,如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
或者
<!DOCTYPE HTML>
获取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方法有如下这几个私有个功能
其他扩展方法:API.html#API
一、使用iframe内部脚本控制对话框
请打开 login_iframe.html 查看源码
art.dialog.open('login_iframe.html', {title: '提示'});
二、在外部对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('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);// 此时 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('警察叔叔会请你喝茶!', function () {alert(0)});
确认消息[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){ // 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);
0 0
- artDialogiframe Tools
- Tools
- tools
- tools
- tools
- Tools
- tools
- tools
- tools
- Tools
- tools
- : /tools
- TOOLS
- tools
- Tools
- tools
- tools
- Tools
- Android开发代码规范
- XAMPP中phpmyadmin 无法访问的问题
- 【bzoj 1355】 [Baltic2009]Radio Transmission(kmp)
- c语言第11章至第13章复习总结
- 第63篇Chrome扩展蓝牙开发(三) 及PHP研究
- artDialogiframe Tools
- AndroidAnnotations学习笔记(一)
- laravel phpexcel 导入导出
- 【BZOJ】4619 [Wf2016] Swap Space
- [BZOJ1968][Ahoi2005]COMMON 约数研究(线性筛)
- 内核键盘中断处理进阶
- WPF编程宝典学习笔记目录
- 如何将ThreadLocal传递到子线程
- 使用HttpURLConnection