关于父页面调用子页面，子页面传值给父页面回调函数的实现

父页面代码 test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>父页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>
<div>
    我是父页面
    点击我，让我变弹窗<a href="javascript:void(0)" onclick="jump()">点击</a>
</div>
<script>
var url_path_html;//项目地址
function getContextHtmlPath() {
    var pathName = document.location.pathname;
    var index = pathName.substr(1).indexOf("/");
    var result = pathName.substr(0,index+1);
    if(result != "/pro_name") {
        result = pathName.substr(0,0);
    }
    return result;
}
url_path_html = getContextHtmlPath();
var page ;
function jump(){
    page=layer.open({
        type: 2,
        title: '子页面',
        maxmin: true,
        shadeClose: false, //点击遮罩关闭层
        area : ['700px' , '400px'],
        content:url_path_html+'/test2.html?callback=childrenCall',//回调函数名
        btn: ['关闭'],
        cancel: function(index){ //或者使用btn2
            layer.close(index);
        }
    });
}
function childrenCall(content){//回调函数
    layer.close(page);//关闭弹出框
    layer.alert(content);//回调的参数，在此方法可以做相应的处理，比如保存到数据库，或告诉父页面调用成功等提示信息
}
</script>
    <script type="text/javascript" src="../../../js/jquery/jquery1-11.min.js"></script>
    <script type="text/javascript" src="./../../../js/layui/layui.all.js"></script>

</body>
</html>

子页面代码 test2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>子页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body>
<div>
    我是子页面
    <a href="javascript:void(0)" onclick="modify()">点击</a>
</div>
<script>
function GetQueryString(name,istop) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if(typeof(istop) != "undefined") r = top.location.search.substr(1).match(reg);

    if (r != null) return unescape(r[2]);
    return null;
}
if(null != GetQueryString("callBack")){
    callBack = GetQueryString("callBack");
}
function modify(){
    var content="弹出新内容";
    if($.isFunction(window.parent[callBack])){//如果是函数则允许调用父页面的方法
         window.parent[callBack](content);
      }
}
</script>
    <script type="text/javascript" src="../../../js/jquery/jquery1-11.min.js"></script>

</body>
</html>

关于父页面调用子页面，子页面传值给父页面 回调函数的实现

猜你喜欢

关于父页面调用子页面，子页面传值给父页面回调函数的实现