Easyui彈出窗體在iframe的父級頁面顯示

時間 2019-11-10

原文原文鏈接

今天作EasyUI學習的預到了一個這樣的問題：經過iframe加載的一個頁面在調用$.messager.alert();這個方法後只能在iframe中顯示alert效果而不是在全局的頁面上顯示這並不我要的效果：通過查找解決方法以下：javascript

演示頁面：css

iframemessager.html代碼：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的頁面代碼：java

<!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>