artDialog

最新推荐文章于 2021-08-05 18:59:19 发布

haiwei_sun

最新推荐文章于 2021-08-05 18:59:19 发布

阅读量8.2k

点赞数

分类专栏： jquery 文章标签： iframe function 框架 input login 模板引擎

jquery 专栏收录该内容

102 篇文章 0 订阅

订阅专栏

如果顶层面引用了artDialog，对话框会穿越出框架在父页面弹出
chrome浏览器本地运行会有安全限制，请在服务器上查看本页面
artDialog只能运行在W3C标准页面下，需要页面有声明<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或者<!DOCTYPE HTML>（jQuery版本则无此限制）

获取artDialog可用顶层页面window对象[parent]

art.dialog.parent方法可以理解为widnow.top，但art.dialog.parent已经排除了框架集、跨域、artDialog对象不存在的情况，最终给出一个安全可用的window对象，这里页面所有穿越的对话框最终是在这个window上。你可以用此作为前缀去操作对话框穿越框架后所在页面的对象

var win = art.dialog.parent;
win.document.title = '我修改了页面标题';
win.document.getElementById('testInput').value = 'hello world!';

可穿越框架的标准对话框[through]

不鼓励直接使用window.top这样的方式穿越，这样可能因为对话框触发页面重置导致其产生所有的对象在内存中被清空，而让对话框无法关闭，所以你应该用这个安全的方法创建自定义对话框。

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

嵌入网页[open]

同域下能够自适应iframe大小，但chrome 浏览器本地运行会认为跨域而无法适应大小

open方法有如下这几个私有个功能

名称	类型	描述
iframe内部静态方法
art.dialog.open.api	Object	从iframe页面引用对话框控制接口
art.dialog.open.origin	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: '提示'});

二、在外部对iframe进行控制

对iframe控制需要用到open私有的this.iframe控制接口：

art.dialog.open('login_iframe_2.html', {
    title: '登录',
    // 在open()方法中，initFn会等待iframe加载完毕后执行
    initFn: function () {
    	var iframe = this.iframe.contentWindow;
    	var parent = art.dialog.parent;// 引用顶层页面window对象
        var username = iframe.document.getElementById('login-form-username');
        username.value = 'guest';
        setTimeout(function () {
        	username.select();
        }, 80);
        parent.document.title = '测试';
    },
    yesFn: 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;
    },
    noFn: 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://zhihu.com/', {title: '知乎', width: 860, height: 500});

框架与框架、主页面数据共享[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片段',
    yesFn: function(topWin){
    	art.dialog('hello world');
    },
    closeFn: function(){
    	art.dialog.tips('close')
    }
}, false);

art.dialog.load('./ajaxContent/login.html', false);

二、加载JSON结合模板生成结构

特别说明：这里是用JSON数据+模板引擎拼接HTML代码，推荐此代替常规的iframe拼接页面，它比iframe快多了

art.dialog.load('./ajaxContent/content.json', {
    title: '使用JSON拼接模板',
    tmpl: '\
    <% if (code === 0) { %>\
        <p>当前用户：<a href="<%=web%>" title="<%=web%>"><%=me%></a></p>\
        <p>\
            所有用户：\
            <% for (i = 0; i < users.length; i++) { %>\
                <%=i + 1%>.<%=users[i]%> \
            <% } %>\
        </p>\
    <% } else { %>\
    	<p>哦，服务器出错了，错误代码：<%=code%><p>\
    <% } %>\
    '
}, true);

警告消息[alert]

art.dialog.alert('警察叔叔会请你喝茶！');

确认消息[confirm]

art.dialog.confirm('你确认删除操作？', function(){
var parent = art.dialog.parent,
    input = document.getElementById('demoInput02'),
    photo = parent.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.parent.document.getElementById('testInput');
    if (input) input.value = data;
    if (topVal) topVal.value = data;
}, '我是糖饼');

提示消息[tips]

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

haiwei_sun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
artDialog

artDialogiframe Tools返回首页 | 在框架中演示本页面如果顶层面引用了artDialog，对话框会穿越出框架在父页面弹出chrome浏览器本地运行会有安全限制，请在服务器上查看本页面artDialog只能运行在W
复制链接

扫一扫