Easyui弹出窗体在iframe的父级页面显示

今天做EasyUI学习的预到了一个这样的问题:通过iframe加载的一个页面在调用$.messager.alert();这个方法后只能在iframe中显示alert效果而不是在全局的页面上显示这并不我要的效果:经过查找解决方法如下:

演示页面:

iframemessager.html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyUI 初步 -iframe窗口</title>
<!-- easyUI必须引入的文件 S -->
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"/>  
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"/> 
<script type="text/javascript" src="../easyui/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<!-- easyUI必须引入的文件 E -->
</head>
<body>
    <iframe scroll="no" frameborder="2" src="messager.html" style="margin:20px;width:400px;height:400px;"</iframe>
</body>
</html>

子页面messager的页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyUI 初步 -iframe弹出messager</title>
<!-- easyUI必须引入的文件 S -->
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"/>  
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"/> 
<script type="text/javascript" src="../easyui/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<!-- easyUI必须引入的文件 E -->
</head>
<body>
    <a href="#" class="easyui-linkbutton" style="margin:20px" onclick="msg()">弹出提示</a>
    <script type="text/javascript">
        function msg(){
            parent.$.messager.alert('操作提示','提示的内容');
        }
    </script>



</body>
</html>

注:在本地测试下IE浏览器是没有任何的安全问题的,但是在webkit内核的浏览器(包括Chrome、搜狗、360、猎豹、遨游等)都会提示如下的错误:

image

经过查找后:原因是因为webkit内核浏览器的本地安全问题所导致的,解决的方法很容易就是把对应的页面放在服务器下就行了,如IIS、Tomcat就不会出现了!

转载于:https://my.oschina.net/u/212572/blog/795988

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用EasyUI弹出框非常简单,你可以像下面这样使用: 1. 引入EasyUI的JS和CSS文件 ```html <!-- 引入EasyUI的CSS文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/icon.css"> <!-- 引入jQuery和EasyUI的JS文件 --> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script> ``` 2. 创建弹出框的HTML代码 ```html <div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post" novalidate> <div class="fitem"> <label for="name">Name:</label> <input type="text" id="name" name="name" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label for="email">Email:</label> <input type="email" id="email" name="email" class="easyui-validatebox" required="true" validType="email"> </div> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a> </div> ``` 3. 初始化弹出框 ```javascript function openDialog() { $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Add User'); } function saveUser() { $('#fm').form('submit', { url: 'save_user.php', onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); $('#dg').datagrid('reload'); } else { $.messager.show({ title: 'Error', msg: result.msg }); } } }); } ``` 4. 触发弹出框 ```html <a href="#" class="easyui-linkbutton" onclick="openDialog()">Add User</a> ``` 这样,一个简单的EasyUI弹出框就完成了,你可以根据自己的需求进行相应的修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值