artdialog 弹出页面 iframe

教程分享 > Java教程 (2883) 2023-03-28 11:29:14

artdialog 弹出页面iframe

一、artdialog的安装引入

首先去artdialog官网或者去GitHub下载artDialog的相关文件,并且将核心文件和依赖的jQuery文件导入自己使用的HTML页面中

<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>

二、弹出页面的编写

编写一个你需要弹出的页面,这里我编辑一个简单的HTML页面作为待会需要通过artDialog弹出页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试的iframe页面</title>
</head>
<body>
<h1>这个页面是由artDialog通过iframe打开的</h1>
<p>当前页面是一个见得demo页面</p>
</body>
</html>

三、编写artDialog弹出页面 iframe

artDialog如果要弹出iframe页面必须满足一下几点:

artDialog版本必须是4.x的版本,本文使用4.1.7,最新的已经7.0.0了，但是4.x后的版本放弃了iframe的支持；
需要引入artDialog版本的iframe插件,也就上面第一点里面的iframeTools.source.js

编写一个弹出的页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo artDialog</title>
</head>
<body>

<button id="alert-btn">弹出页面按钮</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function(){
	//绑定按钮事件
	$('#alert-btn').click(function(){
		art.dialog.open('demo-iframe-a.html', {
			title:'artDialog 弹出页面 iframe 这个是标题',
			ok:function(){
				alert('您点击的确定');
				return true;
			},
			cancel:function(){
				alert('您点击的取消');
				return false;
			},
			okVal:'确定',
			cancelVal:'取消',
			width:'600px',
			height:'400px'
		}, false);
	});
})
</script>

</body>
</html>

四、artdialog iframe弹出页面传递值

本功能点主要讲解在artDialog弹出iframe中，如何从iframe中传递值给弹出的父级页面。
4.1.修改弹出页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试的iframe页面</title>
</head>
<body>
<h1>这个页面是由artDialog通过iframe打开的</h1>
<p>当前页面是一个见得demo页面</p>
<button id="btn-test">点击我关闭并且传递值</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function() {
	
	//绑定点击事件
	$('#btn-test').click(function() {
		//获取父级
		var win = art.dialog.open.origin;
		//设置父级变量
	    win.artdialog_return ='你好,这段话来自artDialog弹出的iframe页面。';
	    //关闭弹窗
		art.dialog.close();
	});
	 
})
</script>
</body>
</html>

4.2修改主页代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo artDialog</title>
</head>
<body>

<button id="alert-btn">弹出页面按钮</button>
<!-- 引入需要的相关文件 -->
<script type="text/javascript" src="../../libs/jQuery/jquery.js"></script>
<script src="../../libs/artDialog/v4.1.7/artDialog.source.js?skin=default"></script>
<script src="../../libs/artDialog/v4.1.7/plugins/iframeTools.source.js"></script>
<script type="text/javascript">
$(function(){
	//绑定按钮事件
	$('#alert-btn').click(function(){
		//定义个变量接收iframe弹窗页面的回调值
		artdialog_return="";//不使用var定义标示全局变量
		art.dialog.open('demo-iframe-a.html', {
			title:'artDialog 弹出页面 iframe 这个是标题',
			ok:function(){//确定按钮事件
				alert('您点击的确定');
				return true;
			},
			cancel:function(){//取消按钮事件
				alert('您点击的取消');
				return false;
			},
			okVal:'确定',
			cancelVal:'取消',
			width:'600px',
			height:'400px',
			close:function(){//关闭弹窗事件
				alert(artdialog_return);
			}
		}, false);
	});
})
</script>

</body>
</html>

执行上面的代码结果图：