jQuery 编写iframe页面, 以及页面使用

小柴_

于 2021-05-10 14:41:11 发布

阅读量732

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43687353/article/details/116595672

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

iframe引用

<!--iframe引用页面-->
<div class="easyui-dialog" style="border: 0;" id="iframe-dialog"
     data-options="closed:true,width:800,height:600,
     content:'<iframe src=\'\' id=\'dialog-iframe-id\' width=\'100%\' height=\'99%\' frameborder=\'0\' scrolling=\'no\'></iframe>'">
</div>

父页面关闭窗口的函数

<script type="application/javascript">
		function closeIframeDialog(){
            $('#iframe-dialog').dialog('close')
        }
</script>

iframe页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>规则配置</title>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../icon/css/icon.css">
    <link rel="stylesheet" type="text/css" href="../../easyui/common.css">
    <script src="../../easyui/jquery.min.js" type="application/javascript"></script>
    <script src="../../easyui/jquery.easyui.min.js" type="application/javascript"></script>
    <script src="../../easyui/common.js" type="application/javascript"></script>
    <script src="../../easyui/jquery.cookie.js" type="application/javascript"></script>
    <script src="../../easyui/locale/easyui-lang-zh_CN.js" type="application/javascript"></script>
    <script type="application/javascript">
        (function () {
            if (window.ruleForm !== undefined && ruleForm in window) {
                console.info("ruleForm already exists!");
            } else {
                ruleForm = {
                    data: {
                    }
                };
            };
            function findDetail(juDianId) {
                $.post("../../judian/findDetail", {"juDianId":juDianId}, function(data){
                    //回显表单
                    $("#rule-config").form('load', data);
                },"json")
            }
            function getParam(name) {
                return location.href.match(new RegExp('[?&]' + name + '=([^?&]+)', 'i')) ? decodeURIComponent(RegExp.$1) : '';
            }
            var juDianId = getParam("id");
            window.juDianId = juDianId;
            findDetail(juDianId);

            ruleForm.closeDialog = function () {
                //调用父窗口的函数,关闭dialog
                window.parent.closeIframeDialog();
            };
            ruleForm.saveRuleConfig = function () {
                if (!$("#rule-config").form('validate')) {
                    return false;
                }
                var fromData = $("#rule-config").serializeJsonNotNull();
                fromData.juDianId = window.juDianId;
                $.post("../../judian/saveRuleConfig", fromData, function (data) {
                    if (data.code === '200') {
                        //关闭窗口
                        ruleForm.closeDialog();
                        $.messager.show({title: '提示', msg: '操作成功！！', showType: 'show'});
                    } else {
                        ruleForm.closeDialog();
                        $.messager.show({title: '提示', msg: data.msg, showType: 'show'});
                    }
                }, "json");
            };
        })();
    </script>

</head>
<body class="easyui-layout">
<div data-options="region:'center'">
    <form id="rule-config" method="post">
        <!--<input name="id" type="hidden">-->
        <div class="form-view">
            <div>
                <div>
                    <label style="width: auto">生效时间：</label>
                    <input name="startTime" class="easyui-datebox" data-options="formatter:defaultFormatter">
                    <input name="endTime" class="easyui-datebox" data-options="formatter:defaultFormatter"/>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">期数：</label>
                    <select class="easyui-combobox" name="step" style="width:168px;" data-options="panelHeight:'auto'" required>
                        <option value=""></option>
                        <option value="3">3期</option>
                        <option value="6">6期</option>
                        <option value="12">12期</option>
                        <option value="24">24期</option>
                        <option value="36">36期</option>
                    </select>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">回款费率：</label>
                    <input style="width: 50px;" type="radio" name="rcvFeeType" value="1"/>订单数据
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">我司服务费率：</label>
                    <input style="width: 50px;" type="radio" name="companyServiceFeeType" value="1"/>订单数据
                    <input style="width: 50px;" type="radio" name="companyServiceFeeType" value="2"/>固定费率  <input type="text" name="companyServiceFee" placeholder="请填写（%）"/>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">运营商服务费率（选填）：</label>
                    <input style="width: 50px;" type="radio" name="yysServiceFeeType" value="1"/>订单数据
                    <input style="width: 50px;" type="radio" name="yysServiceFeeType" value="2"/>固定费率  <input type="text" name="yysServiceFee" placeholder="请填写（%）"/>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">退款结清规则：</label>
                    <input style="width: 50px;" type="checkbox" name="refundOverRule" value="2"/>跨月额外收费
                    <input style="width: 50px;" type="checkbox" name="refundOverRule" value="1"/>超指定天数额外收费  <input type="text" name="refundOverRuleValue" placeholder="请填写（天）"/>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">用户结清费用：</label></br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="1"/>费率*放款金额  <input type="text" name="userOverAmountRuleFee" placeholder="请填写（%）"/></br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="2"/>剩余本金+最多三期利息</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="3"/>剩余冻结金额</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="4"/>剩余本金+剩余本金*费率  <input type="text" name="userOverAmountRuleFee" placeholder="请填写（%）"/></br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="5"/>剩余本金+冻结金额*费率  <input type="text" name="userOverAmountRuleFee" placeholder="请填写（%）"/></br></br>
                </div>
            </div>
            </br>
            <div>
                <div>
                    <label style="width: auto">用户结清运营商服务费（选填）：</label></br></br>
                    <input style="width: 50px;" type="radio" name="userOverYysServiceFeeType" value="1"/>费率*放款金额  <input type="text" name="userOverYysServiceFeeValue" placeholder="请填写（%）"/></br></br>
                    <input style="width: 50px" type="radio" name="userOverYysServiceFeeType" value="2"/>（费率*每期本金）*实收结清利息期数  <input type="text" name="userOverYysServiceFeeValue" placeholder="请填写（%）"/></br></br>
                </div>
            </div>
        </div>
    </form>
</div>

<div style="text-align: right;" data-options="region:'south'">
    <a style="margin: 10px" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="ruleForm.saveRuleConfig()">保存</a>
    <a href="#" style="margin: 10px" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="ruleForm.closeDialog()">重置</a>
    <!--<a href="#" style="margin: 10px" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="alert($('#iframe-dialog',).length)">重置</a>-->
</div>

</body>
</html>