iframe父页面自适应子页面的高度

系统管理员 2022-04-11 12:22 424阅读 0赞

我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而

# [html5 postMessage解决跨域、跨窗口消息传递][html5 postMessage] #

### postMessage() ###

这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

1.**data**:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。

2.**origin**：字符串参数，指明目标窗口的源，协议+主机+端口号\[+URL\]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"\*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

例如 父页面

<div class="w1200">
        <@header.address hrefs=[{"name":'校级考试',"href":"exam/markTaskList"},
        {"name":'${examName!}',"href":"exam/showExam?examId=${examId!}"},
        {"name":'考试管理',"href":"examTool/home?examId=${examId!}&subjectId=${subjectId!}"},
        {"name":'报表参数设置',"href":"reportSta/toViewParam?examId=${examId!}&examName=${examName!}&subjectId=${subjectId!}"}]/>
        <iframe id="paramIframe" src="http://127.0.0.1:8089/param/viewParam?examId=${examId}&examName=${examName}" frameborder="0" width="100%"></iframe>
    </div>
    
    
    <script type="text/javascript">
        window.addEventListener('message',function(e){
            document.getElementById('paramIframe').height=e.data;
        },false)
    </script>

## 使用[addEventListener() 方法，事件监听][addEventListener_]发送的message消息 ##

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

子页面

<!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" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <#assign cssPath="http://bd.huijiaoyun.com/resources/web_dev" />
        <title>报告参数设置</title>
        <link href="${cssPath}/v4/css/public.css" rel="stylesheet" type="text/css">
        <link href="${cssPath}/v4/css/readPaper1009.css" rel="stylesheet" type="text/css">
    </head>
    
    <body class="bg1">
     <input type="hidden" value="${examId}" id="examId" name="examId" />
    	<div class="zxf_tabWp">
    	    <div class="zxf_tabTit bgStyle pdlr55 pdt10 t_l">    
    	        <a href="javascript:;" class="on">总体设置</a>
    	        <a href="javascript:;">满分(理科)设置</a>
    	        <a href="javascript:;">满分(文科)设置</a>
    	        <a href="javascript:;">满分设置</a>
    	    </div>
    	    <div class="zxf_tabConWp bgStyle mgt20 pdb30 t_c">
    	        
    	        <div class="zxf_tabCon ztsz dis_none" style="display: block;">
    	            <div class="zxf_ztszCon pbt70">
    	               <div class="clearfix">
    	                   <div class="zxf_setLeftWp fl w658">
    	                       <ul class="zxf_setLeftList">
    	                           <li class="fl mgb40">
    	                               <em class="dp_va w100 t_r mgr15 fl f16 c222">优秀率</em>
    	                              <div class="fl zxf_rangeJudgeWp mgt10">
    	                                  <div class="rangeWp scrollBar">
    	                                      <div class="currenRange scrollTrack blue" data-len="10" style="width: 0px;"></div>
    	                                      <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
    	                                  </div>
    	                              </div>
    	                              <div class="fl mgl30 f12 c555">
    	                                  <input class="zxf_inp mgr5 currentValueInp yxl" type="text" value="${staAnalysisParam.yxl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
    	                              </div>
    	                           </li>
    	                           <li class="fl mgb40">
    	                               <em class="dp_va w100 t_r mgr15 fl f16 c222">良好率</em>
    	                              <div class="fl zxf_rangeJudgeWp mgt10">
    	                                  <div class="rangeWp scrollBar">
    	                                      <div class="currenRange scrollTrack green" data-len="20" style="width: 0px;"></div>
    	                                      <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
    	                                  </div>
    	                              </div>
    	                              <div class="fl mgl30 f12 c555">
    	                                  <input class="zxf_inp mgr5 currentValueInp lhl" type="text" value="${staAnalysisParam.lhl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
    	                              </div>
    	                           </li>
    	                           <li class="fl mgb40">
    	                               <em class="dp_va w100 t_r mgr15 fl f16 c222">及格率</em>
    	                              <div class="fl zxf_rangeJudgeWp mgt10">
    	                                  <div class="rangeWp scrollBar">
    	                                      <div class="currenRange scrollTrack orange" data-len="30" style="width: 0px;"></div>
    	                                      <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
    	                                  </div>
    	                              </div>
    	                              <div class="fl mgl30 f12 c555">
    	                                  <input class="zxf_inp mgr5 currentValueInp jgl" type="text" value="${staAnalysisParam.jgl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
    	                              </div>
    	                           </li>
    	                           <li class="fl mgb40">
    	                               <em class="dp_va w100 t_r mgr15 fl f16 c222">低分率</em>
    	                              <div class="fl zxf_rangeJudgeWp mgt10">
    	                                  <div class="rangeWp scrollBar">
    	                                      <div class="currenRange scrollTrack red" data-len="40" style="width: 0px;"></div>
    	                                      <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
    	                                  </div>
    	                              </div>
    	                              <div class="fl mgl30 f12 c555">
    	                                  <input class="zxf_inp mgr5 currentValueInp dfl" type="text" value="${staAnalysisParam.dfl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
    	                              </div>
    	                           </li>
    	                       </ul>
    	                   </div>
    	                  
    	               </div> 
    	                <div class="zxf_setLevelWp"> 
    	                    <ul class="zxf_setLevelUl t_l clearfix pdlr60">
    	                        <li class="fl mgt60">
    	                            <em class="c222 f16 dp_va mgr20 w120 t_r">多科分数段</em>
    	                            <span class="dp_va c555 f14"><input class="zxf_inp fsd_d numInput" type="text" placeholder="请输入全科分数段" value="${staAnalysisParam.fsd_d}" style="width: 170px;"></span>
    	                        </li> 
    	                        <li class="fl mgt60">
    	                            <em class="c222 f16 dp_va mgr20 w120 t_r">名次段</em>
    	                            <span class="dp_va c555 f14"><input class="zxf_inp mcd numInput" type="text" placeholder="请输入名次段" value="${staAnalysisParam.mcd}" style="width: 170px;"></span>
    	                        </li> 
    	                        <li class="fl mgt60">
    	                            <em class="c222 f16 dp_va mgr20 w120 t_r">单科分数段</em>
    	                            <span class="dp_va c555 f14"><input class="zxf_inp fsd_s numInput" type="text" placeholder="请输入单科分数段" value="${staAnalysisParam.fsd_s}" style="width: 170px;"></span>
    	                        </li> 
    	                        <li class="fl mgt60">
    	                        	 <em class="c222 f16 dp_va mgr20 w120 t_r fl">单科统计设置</em>
    	                        	<span class="selecterBox selecterStyle1 fl selectExamTypeDropBox" style="width:210px;">
    									<span class="selecterValue" style="line-height: 32px;height: 32px;">
    										<#if staAnalysisParam.statisticalCaliberSubject==2>
    										<p style="line-height: 32px;height: 32px;">零分和缺考都不统计</p>
    										<#else>
    										<p style="line-height: 32px;height: 32px;">缺考不统计</p>
    										</#if>
    										<input type="hidden" class="selRes statisticalCaliberSubject" value="${staAnalysisParam.statisticalCaliberSubject}">
    									</span>
    									<span class="selecterDrop" style="width: 110px;">
    										<a href="javascript:void(0);" value="1">缺考不统计</a>
    										<a href="javascript:void(0);" value="2">零分和缺考都不统计</a>
    									</span>
    								</span>
    								
    	                        </li> 
    	                        <li class="fl mgt60">
    	                            <em class="c222 f16 dp_va mgr20 w120 t_r">多科统计设置</em>
    	                            <span class="dp_va c555 f14"><input class="zxf_inp statisticalCaliberMultiSubject" readonly="readonly" type="text" placeholder="1" value="1" style="width: 170px;"></span>
    	                            <p class="cb9b9b9 14 mgt5 pdl140">1  表示缺考不统计</p>
    	                        </li> 
    	                    </ul>
    	                </div>   
    	            </div>
    	        </div> 
    	        
    	        <div class="zxf_tabCon mfljsz dis_none">
    	            <div class="zxf_mflkszCon w650">
    	                <div class="clearfix pdt50 pdb40">
    	                    <h2 class="f24 c222 fl">满分(理科)</h2>
    	                    <input class="zxf_inp cff8d8d sxfsFullScore1 numInput" value="${staAnalysisParam.sxfsFullScore1}"/>
    	                </div>
    	                <div class="zxf_setGradeWp">
    	                    <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
    	                        <ul class="zxf_setGradeList lksz">
    	                          <#if scienceScore?? && (scienceScore?size gt 0)>
                					<#list scienceScore as map>
                						 <#list map?keys as key>
    			                            <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
    			                            	
    			                                <span class="school_level t_l fl f16 c555 w_40">${key}</span>
    			                                <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
    			                                <span class="f16 fr">
    			                                    <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
    			                                <#if map_index gt 0>
    			                                    <em class="mglr5 cd9d9d9 dp_va">|</em>
    			                                    <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
    			                                </#if>
    			                                </span>
    			                            </li>
    	                           		</#list>
    	                           	</#list>
    		                            
    	                           	</#if>
    	                        </ul>
    	                    </div>
    	                    <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
    	                </div>
    	            </div>
    	        </div> 
    	        
    	        <div class="zxf_tabCon mfwksz dis_none">
    	            <div class="zxf_mflkszCon w650">
    	                <div class="clearfix pdt50 pdb40">
    	                    <h2 class="f24 c222 fl">满分(文科)</h2>
    	                     <input class="zxf_inp cff8d8d sxfsFullScore2 numInput" value="${staAnalysisParam.sxfsFullScore2}"/>
    	                </div>
    	                <div class="zxf_setGradeWp">
    	                    <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
    	                        <ul class="zxf_setGradeList wksz">
    	                              <#if artsScore?? && (artsScore?size gt 0)>
                					<#list artsScore as map>
                						 <#list map?keys as key>
    			                            <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
    			                            	
    			                                <span class="school_level t_l fl f16 c555 w_40">${key}</span>
    			                                <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
    			                                <span class="f16 fr">
    			                                    <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
    			                                <#if map_index gt 0>
    			                                    <em class="mglr5 cd9d9d9 dp_va">|</em>
    			                                    <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
    			                                </#if>
    			                                </span>
    			                            </li>
    	                           		</#list>
    	                           	</#list>
    		                            
    	                           	</#if>
    	                        </ul>
    	                    </div>
    	                    <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
    	                </div>
    	            </div>
    	        </div>
    	        
    	        <div class="zxf_tabCon mfsz dis_none">
    	            <div class="zxf_mflkszCon w650">
    	                <div class="clearfix pdt50 pdb40">
    	                    <h2 class="f24 c222 fl">满分</h2>
    	                     <input class="zxf_inp cff8d8d sxfsFullScore0 numInput" value="${staAnalysisParam.sxfsFullScore0}"/>
    	                </div>
    	                <div class="zxf_setGradeWp">
    	                    <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
    	                        <ul class="zxf_setGradeList wlksz">
    	                           <#if baseScore?? && (baseScore?size gt 0)>
                					<#list baseScore as map>
                						 <#list map?keys as key>
    			                            <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
    			                            	
    			                                <span class="school_level t_l fl f16 c555 w_40">${key}</span>
    			                                <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
    			                                <span class="f16 fr">
    			                                    <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
    			                                <#if map_index gt 0>
    			                                    <em class="mglr5 cd9d9d9 dp_va">|</em>
    			                                    <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
    			                                </#if>
    			                                </span>
    			                            </li>
    	                           		</#list>
    	                           	</#list>
    		                            
    	                           	</#if>
    	                        </ul>
    	                    </div>
    	                    <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
    	                </div>
    	            </div>
    	        </div>
    	    </div>
    	   <div class="zxf_btnWp bgfff t_c pdtb20">
    	        <a href="javascript:;" class="zxf_bgBlue_btn zxf_stayBtn f16">保存</a>
    	   </div>
    	</div>
    	
    	
    	
    	<div class="zxf_popupEditGrede dis_none" id="gradeLevel">
    	    <ul class="zxf_fromList">
    	        <li class="clearfix mgb20 f16 c222 school_level">
    	            <em class="mgr20 fl t_r">名称：</em>
    	            <span class="fl">
    	                <input class="zxf_inp" type="text" value="一本">
    	            </span>
    	        </li>
    	        <li class="clearfix mgb20 f16 c222 grade">
    	            <em class="mgr20 fl t_r">分数：</em>
    	            <span class="fl">
    	                <input class="zxf_inp mgr20" type="text" value="484" style="width: 76px;">
    	                分
    	            </span>
    	        </li>
    	    </ul>
    	</div>
    </body>
    <script type="text/javascript" src="${cssPath}/v4/js/jquery.min.js"></script>
    <script type="text/javascript" src="${cssPath}/v4/js/fun.js"></script>
    <script type="text/javascript" src="${cssPath}/v4/js/jquery.artDialog.source.js"></script>
    <script type="text/javascript" src="${cssPath}/v4/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="${cssPath}/v4/js/echarts.min.js"></script>
     <script type="text/javascript" src="${request.contextPath}/statics/lib/commonDialog.js" charset="utf-8"></script>
    <script>
        $(".zxf_scrollBox_gradeLevel").perfectScrollbar();
        $(".selecterBox").drop();
        $(".selecterBox").Selector();    
    
    
    	$(function () {
            sendMessage();
        });
        function sendMessage() {
            var height = document.body.scrollHeight;
            height += 20;
            window.parent.postMessage(height,'*');
        }
        //tab
        $(document).on("click", ".zxf_tabTit a", function(){
            var $tabCon = $(this).parents(".zxf_tabTit").next(".zxf_tabConWp").find(".zxf_tabCon");
            var idx = $(this).index();  
            var $totalGrade = $tabCon.find(".totalGrade");
            var $grade = $tabCon.eq(idx).find(".grade");
            $(this).addClass("on").siblings().removeClass("on");
            $tabCon.eq(idx).show().siblings().hide();
            sendMessage();
        });
    
        //添加分数线
        $(document).on("click", ".zxf_addEleBtn", function(){
            var $setGrade = $(this).parents(".zxf_setGradeWp");
            var $ul = $setGrade.find(".zxf_setGradeList");
            var lastScore= parseInt($ul.find("li:last").find("em").html())-10;
            var html = '';
            html += '<li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">';
            html += '<span class="school_level t_l fl f16 c555 w_40">一本</span>';
            html += '<span class="fl grade t_l fl f20 cff8d8d w_40"><em>'+lastScore+'</em></span>';
            html += '<span class="f16 fr">';
            html += '<a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>';
            html += '<em class="mglr10 cd9d9d9 dp_va">|</em>';
            html += '<a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>';
            html += '</span>';
            html += '</li>';
            $ul.append(html);
           
        });
    
        //删除分数线
        $(document).on("click", ".zxf_delBtn", function(){
          
            var $li = $(this).parents("li");
            $li.remove();
          
        });
    
        // 编辑分数线弹窗
        $(document).on("click", ".zxf_editBtn", function(){
            var that = this;
            var $setGrade = $(that).parents(".zxf_setGradeWp");
            var $totalGrade =  $setGrade.prev().find(".totalGrade");
            var $ul = $setGrade.find(".zxf_setGradeList");
            var totalGrade = 0;
            var $li = $(that).parents("li");
            var $school_level = $li.find(".school_level");
            var $grade = $li.find(".grade").find("em");
            var level = $school_level.text();
            var grade = $grade.text();
            var levelInp = $("#gradeLevel").find(".school_level").find(".zxf_inp")
            var gradeInp = $("#gradeLevel").find(".grade").find(".zxf_inp")
            levelInp.val(level);
            gradeInp.val(grade);
            var gradeLevel=document.getElementById('gradeLevel');
            var artDialog=art.dialog({
                lock: true,
                fixed: true,
                title: '编辑分数线',
                content: gradeLevel,
                width:'530px',
                opacity: 0.6,
                drag: false,
                padding: '0px 25px',
                ok: function() {
                    var $li = $(that).parents("li");
                    var $school_level = $li.find(".school_level");
                    var $grade = $li.find(".grade").find("em");
                    $school_level.text(levelInp.val());
                    $grade.text(gradeInp.val());
                    var $grade = $ul.find(".grade");
                    $grade.each(function(){
                        totalGrade += ($(this).find("em").text())*1;
                    });
                    $totalGrade.text(totalGrade + '分');
                },
                cancel: function() {},
                init: function() {}
            })
        });
    </script>
    <script type="text/javascript"> 
        $(function(){
      		   var moveTag = true; // 决定mouseMove事件的执行
            var maxValue = 100;    
            var dataList = [];
            var nowIndexTrack;
            var nowIndexThumb;
            var nowIndexInp;
            var thisMaxWidth;
            var thisMaxValue;
            // var total = 0;
            initZTSZ();
            $(".scrollThumb").on("mousedown", function(e) {  
                moveTag = true;  
                var that = this;
                var length = $(that).width()/2; 
                var $scrollTrack = $(that).parent(".scrollBar").find(".scrollTrack");
                var $currentValueInp = $(that).parents("li").find(".currentValueInp");
                var $scrollBar = $(that).parents(".scrollBar");
                var initValue = $scrollTrack.data("len");
                var value = 0;   
                nowIndexTrack = $scrollTrack.index('.scrollTrack')
                nowIndexThumb = $(this).index('.scrollThumb')
                nowIndexInp = $currentValueInp.index('.currentValueInp')
                $(document).mousemove(function(e) {
                    if (moveTag === false) return;
                    if(nowIndexTrack==0){
                    	 var changeX = e.clientX - length - $(".zxf_rangeJudgeWp").offset().left;
    	                $('.scrollTrack').eq(nowIndexTrack).data("len", changeX);
    	                $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollTrack.data("len") + 3 + "px");
    	                $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollTrack.data("len") + "px");
    	                if (($scrollTrack.data("len") + 14) >= $scrollBar.width()) { // "14":为thumb的宽度 临界最小值
    	                    $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollBar.width() + 3 + "px");
    	                    $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollBar.width() - length + "px");
    	                    value = maxValue;
    	                } else if ($scrollTrack.data("len") <= 0) { //临界最小值
    	                    $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", "0px");
    	                    $('.scrollTrack').eq(nowIndexTrack).css("width", "0px");
    	                    value = 0;
    	                    $scrollTrack.data("len", 0);
    	                    moveTag = false;
    	                } else {
    	                   value = Math.round(100 * ($scrollTrack.data("len") / $scrollBar.width()).toFixed(2));
    	                }
    	                $(".currentValueInp").eq(nowIndexInp).val(value);
                    }else{
                     	var lwidth=$('.scrollThumb').eq(nowIndexThumb-1).css("marginLeft");
                     	lwidth=lwidth.substring(0,lwidth.length-2);
                    	 var changeX = e.clientX - length - $(".zxf_rangeJudgeWp").offset().left;
                     	if(lwidth>=changeX){
                     		 $('.scrollTrack').eq(nowIndexTrack).data("len", changeX);
    		                $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollTrack.data("len") + 3 + "px");
    		                $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollTrack.data("len") + "px");
    		                if (($scrollTrack.data("len") + 14) >= $scrollBar.width()) { // "14":为thumb的宽度 临界最小值
    		                    $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollBar.width() + 3 + "px");
    		                    $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollBar.width() - length + "px");
    		                    value = maxValue;
    		                } else if ($scrollTrack.data("len") <= 0) { //临界最小值
    		                    $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", "0px");
    		                    $('.scrollTrack').eq(nowIndexTrack).css("width", "0px");
    		                    value = 0;
    		                    $scrollTrack.data("len", 0);
    		                    moveTag = false;
    		                } else {
    		                   value = Math.round(100 * ($scrollTrack.data("len") / $scrollBar.width()).toFixed(2));
    		                }
    		                $(".currentValueInp").eq(nowIndexInp).val(value);
                     	}
                    }
                   
                    
                    
                });
            });
            $(document).mouseup(function() {
                moveTag = false;
            });
            
           
        });
        
        function initZTSZ() {
    	    $(".scrollTrack").each(function() { //初始化
    	        var $scrollBar = $(this).parents(".scrollBar");
    	        var $Thumb = $(this).next(".scrollThumb");
    	        var $inp = $(this).parents("li").find(".currentValueInp");
    	        var slb = parseFloat($inp.val());
    	        var len = slb / 100 * $scrollBar.width();
    	        $Thumb.css("marginLeft", len + "px");
    	        $(this).css("width", len + 2 + "px");
    	    });
    	}
    	
    	//保存
    	$(".zxf_bgBlue_btn").on("click", function() {
    		//参数校验
    		var checkRes=paramCheck();
    		if(!checkRes.flag){
    			artContent(checkRes.msg);
    			return;
    		}
    	    //获取数据
    	    var data = getData();
    	    $.ajax({
    	        url: "/param/updateParam",
    	        type: "POST",
    	        data: data,
    	        async: false,
    	        success: function(data) {
    	            if (data.code == "1") {
    	                artContent("保存成功");
    	                //window.location.reload();
    	            } else {
    	                artContent(data.msg);
    	                //layer.msg(data.msg);
    	            }
    	        },
    	        error: function(msg) {
    	            artContent("参数为空或请求服务器错误");
    	            //layer.msg('服务器忙,请稍后重试');
    	        }
    	    });
    	
    	})
    	
    	function getData() {
    	    var yxl = $(".yxl").val() / 100;
    	    var lhl = $(".lhl").val() / 100;
    	    var jgl = $(".jgl").val() / 100;
    	    var dfl = $(".dfl").val() / 100;
    	    var fsd_s = $(".fsd_s").val();
    	    var mcd = $(".mcd").val();
    	    var fsd_d = $(".fsd_d").val();
    	    //单科统计设置
    	    var statisticalCaliberSubject = $(".statisticalCaliberSubject").val();
    	    var statisticalCaliberMultiSubject = 1;
    	    var sxfsFullScore0 = $(".sxfsFullScore0").val();
    	    var sxfsFullScore1 = $(".sxfsFullScore1").val();
    	    var sxfsFullScore2 = $(".sxfsFullScore2").val();
    	    var sxfs0 = JSON.stringify(getwlksz($(".wlksz")));
    	    var sxfs1 = JSON.stringify(getwlksz($(".lksz")));
    	    var sxfs2 = JSON.stringify(getwlksz($(".wksz")));
    	    return {
    	        "yxl": yxl,
    	        "lhl": lhl,
    	        "jgl": jgl,
    	        "dfl": dfl,
    	        "fsd_s": fsd_s,
    	        "fsd_d": fsd_d,
    	        "mcd": mcd,
    	        "statisticalCaliberSubject": statisticalCaliberSubject,
    	        "statisticalCaliberMultiSubject": statisticalCaliberMultiSubject,
    	        "sxfsFullScore0": sxfsFullScore0,
    	        "sxfsFullScore1": sxfsFullScore1,
    	        "sxfsFullScore2": sxfsFullScore2,
    	        "sxfs0": sxfs0,
    	        "sxfs1": sxfs1,
    	        "sxfs2": sxfs2,
    	        "examId": $("#examId").val()
    	
    	    };
    	}
    	//获取文理科设置
    	function getwlksz(obj) {
    	    var lksz = {};
    	    $(obj).find("li").each(function() {
    	        var key = $(this).find("span").eq(0).html();
    	        var value = $(this).find("span").eq(1).find("em").html();
    	        lksz[key] = value;
    	    })
    	    return lksz;
    	}
    	
        //对numInput进行校验数字
    	$(".numInput").keyup(function(){
    		var num=$(this).val();
    		var flag=num.match(/^[0-9]*$/);
    		if(flag==null){
    			artContent("请输入整数！")
    			$(this).val('');
    		}
    	})
    	
    	function paramCheck() {
    	    var yxl = $(".yxl").val();
    	    var lhl = $(".lhl").val();
    	    var jgl = $(".jgl").val();
    	    var dfl = $(".dfl").val();
    	    var fsd_s = $(".fsd_s").val();
    	    var mcd = $(".mcd").val();
    	    var fsd_d = $(".fsd_d").val();
    	
    	    var sxfsFullScore0 = $(".sxfsFullScore0").val();
    	    var sxfsFullScore1 = $(".sxfsFullScore1").val();
    	    var sxfsFullScore2 = $(".sxfsFullScore2").val();
    	  
    	    if (yxl == "") {
    	        return { "flag": false, "msg": "ylx不能为空" }
    	    }
    	    if (lhl == "") {
    	        return { "flag": false, "msg": "lhl不能为空" }
    	    }
    	    if (jgl == "") {
    	        return { "flag": false, "msg": "jgl不能为空" }
    	    }
    	    if (dfl == "") {
    	        return { "flag": false, "msg": "dfl不能为空" }
    	    }
    	    dfl=parseFloat(dfl);
    	    jgl=parseFloat(jgl);
    	    lhl=parseFloat(lhl);
    	    yxl=parseFloat(yxl);
    	    if (!(dfl > 0 && dfl <= jgl && jgl < lhl && lhl < yxl && yxl< 100)) {
    	        return { "flag": false, "msg": "不满足0 <dfl <=jgl <lhl <yxl <100这个关系" }
    	    }
    	
    	    if (fsd_s == "") {
    	        return { "flag": false, "msg": "单科分数段不能为空" }
    	    }
    	    if (fsd_d == "") {
    	        return { "flag": false, "msg": "多科分数段不能为空" }
    	    }
    	    if (mcd == "") {
    	        return { "flag": false, "msg": "名次段不能为空" }
    	    }
    	    if (sxfsFullScore0 == "") {
    	        return { "flag": false, "msg": "满分不能为空" }
    	    }
    	    if (sxfsFullScore1 == "") {
    	        return { "flag": false, "msg": "满分（理）不能为空" }
    	    }
    	    if (sxfsFullScore2 == "") {
    	        return { "flag": false, "msg": "满分（文）不能为空" }
    	    }
    		var res1=checkwlksz($(".wlksz"));
    		if(!res1.flag){
    			return res1;
    		}
    		var res2=checkwlksz($(".lksz"));
    		if(!res2.flag){
    			return res2;
    		}
    		var res3=checkwlksz($(".wksz"));
    		if(!res3.flag){
    			return res3;
    		}
    	    return { "flag": true }
    	}
    	
    	//获取文理科设置
    	function checkwlksz(obj) {
    		var tempArr=[];
    	    var keyArr = [];
    	    var valuesArr = [];
    	    $(obj).find("li").each(function() {
    	        var key = $(this).find("span").eq(0).html();
    	        var value = $(this).find("span").eq(1).find("em").html();
    	        value=parseInt(value);
    	        if (key == "") {
    	        	tempArr.push({ "flag": false, "msg": "满分设置类别不能为空" });
    	        }
    	        if (value == "") {
    	          tempArr.push({ "flag": false, "msg": "满分设置类别对应的分数值不能为空" });
    	        }
    	        if (keyArr.length > 0 && $.inArray(key, keyArr) >= 0) {
    	           tempArr.push({ "flag": false, "msg": "满分设置" + key + "重复" });
    	        }
    	        if (valuesArr.length > 0 && valuesArr[valuesArr.length - 1] <= value) {
    	          tempArr.push({ "flag": false, "msg": "满分设置类别对应的分数大小关系错误重复" });
    
    	        }
    	        keyArr.push(key);
    	        valuesArr.push(value);
    	    })
    	    if(tempArr.length>0){
    	    	return tempArr[0];
    	    }
    	    return { "flag": true };
    
    	}
    	
    	
     	
       
    </script>
    </html>

其中

$(function () {
            sendMessage();
        });
        //向父页面发送消息
        function sendMessage() {
            var height = document.body.scrollHeight;
            height += 20;
            window.parent.postMessage(height,'*');
        }

最终就可以实现跨域设置页面高度

[html5 postMessage]: https://www.cnblogs.com/dolphinX/p/3464056.html
[addEventListener_]: https://www.cnblogs.com/baiyangyuanzi/p/6627401.html