art.dialog iframe下刷新父页面

本文主要介绍在mvc下基于art.dialog弹出页面的使用以及在子页面刷新父页面的方法

一.在mvc下使用art.dialog，如下：

1.在页面添加引用

<script src="../../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/artDialog.source.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>

2.使用art.dialog弹出一个单独的action页面

<script type="text/javascript">

art.dialog.open("/controllerName/actionName",{lock:true});//{lock:true}，这里是art.dialog的UI效果参数详细可以参考官网教程

</script>

3.mvc下，art.dialog弹出子页面刷新父页面

纵所周知，在弹出层里是用parent.ParentFunction()刷新父页面，ParentFunction为父页面方法名称

但是

=========================================页面1==========================页面1

@{
    ViewBag.Title = "DialogTest1";
    Layout = null;
}


<h2>DialogTest1</h2>
<button id="show1">显示页面2</button>
<link href="../../Scripts/artDialog/skins/blue.css"
    rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/artDialog.source.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>


<script type="text/javascript">


    $("#show1").click(function() {
        art.dialog.open("/home/DialogTest2",
            { lock: true });
    });


    function Show1(msg) {
        art.dialog.alert(msg + "，这是在页面1");
        $("#content").append(msg + "，这是在页面1");
    }


</script>

=========================================页面2==========================

@{
    ViewBag.Title = "DialogTest1"; Layout = null;
}


<h2>DialogTest1</h2>




<h2>DialogTest2</h2>
<button id="show2">显示页面3</button>
<div id="content"></div>


<script src="../../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/artDialog.source.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>
<script type="text/javascript">


    $("#show2").click(function () {
        art.dialog.open("/home/DialogTest3",
            { lock: true });
    });


    function  Show2(msg) {
        art.dialog.alert(msg);
        $("#content").append(msg+new Date());
    }


</script>

=========================================页面3==========================

@{
    ViewBag.Title = "DialogTest1";
    Layout = null;
}


<h2>DialogTest1</h2>




<h2>DialogTest1</h2>
<button id="show3">操作页面2的show2方法</button>
<button id="show4">操作页面1</button>


<button id="show0">显示页面4</button>
<link href="../../Scripts/artDialog/skins/blue.css"
    rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/artDialog.source.js" type="text/javascript"></script>
<script src="../../Scripts/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>


<script type="text/javascript">


    $("#show3").click(function () {
        art.dialog.opener.Show2("haha");
    });


    $("#show4").click(function () {
        parent.Show1("haha");
    });


    $("#show0").click(function () {
        art.dialog.open("/home/DialogTest4",
            { lock: true });
    });


    function Show3(msg) {
        art.dialog.alert(msg+"这是在页面3");
        $("#content").append(msg + +"这是在页面3");
    }
</script>

===================================================================

测试方法：

页面1里面的方法

    function Show1(msg) {
        art.dialog.alert(msg + "，这是在页面1");
        $("#content").append(msg + "，这是在页面1");
    }

页面2里面的方法

    function  Show2(msg) {
        art.dialog.alert(msg);
        $("#content").append(msg+new Date());
    }

页面3里面的方法

  $("#show3").click(function () {
        art.dialog.opener.Show2("haha");
    });


    $("#show4").click(function () {
        parent.Show1("haha");
    });

当第三个对话框弹出时，可以发现，弹出的两个对话框的html都在父页面1里面（可以通过firebug查看到）

1.页面3里面通过 art.dialog.opener.Show2("haha");直接操作父页面的方法，但是这里无法用parent.Show2("")来触发，因为弹出层是在一个新的iframe里面

2.parent.Show1("haha");方法操作的是页面1里面的方法，说明页面3和页面2都是页面1的子页面

以上就是用art.dialog刷新父页面的方法

疑问：

1.如何在页面3通过iframe操作页面2里面的js方法？

2.如何在页面1里面操作子页面2，子页面3的js方法？

希望高手给予解答，有错误的地方及时指出