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

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

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

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传递给指定窗口，当然如果愿意也可以建参数设置为”*“，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/“。

例如 父页面

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

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

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

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

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

子页面

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  6.     <#assign cssPath="http://bd.huijiaoyun.com/resources/web_dev" />
  7.     <title>报告参数设置</title>
  8.     <link href="${cssPath}/v4/css/public.css" rel="stylesheet" type="text/css">
  9.     <link href="${cssPath}/v4/css/readPaper1009.css" rel="stylesheet" type="text/css">
  10. </head>
  12. <body class="bg1">
  13.  <input type="hidden" value="${examId}" id="examId" name="examId" />
  14.     <div class="zxf_tabWp">
  15.         <div class="zxf_tabTit bgStyle pdlr55 pdt10 t_l">    
  16.             <a href="javascript:;" class="on">总体设置</a>
  17.             <a href="javascript:;">满分(理科)设置</a>
  18.             <a href="javascript:;">满分(文科)设置</a>
  19.             <a href="javascript:;">满分设置</a>
  20.         </div>
  21.         <div class="zxf_tabConWp bgStyle mgt20 pdb30 t_c">
  22.             <!-- 总体设置 -->
  23.             <div class="zxf_tabCon ztsz dis_none" style="display: block;">
  24.                 <div class="zxf_ztszCon pbt70">
  25.                    <div class="clearfix">
  26.                        <div class="zxf_setLeftWp fl w658">
  27.                            <ul class="zxf_setLeftList">
  28.                                <li class="fl mgb40">
  29.                                    <em class="dp_va w100 t_r mgr15 fl f16 c222">优秀率</em>
  30.                                   <div class="fl zxf_rangeJudgeWp mgt10">
  31.                                       <div class="rangeWp scrollBar">
  32.                                           <div class="currenRange scrollTrack blue" data-len="10" style="width: 0px;"></div>
  33.                                           <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
  34.                                       </div>
  35.                                   </div>
  36.                                   <div class="fl mgl30 f12 c555">
  37.                                       <input class="zxf_inp mgr5 currentValueInp yxl" type="text" value="${staAnalysisParam.yxl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
  38.                                   </div>
  39.                                </li>
  40.                                <li class="fl mgb40">
  41.                                    <em class="dp_va w100 t_r mgr15 fl f16 c222">良好率</em>
  42.                                   <div class="fl zxf_rangeJudgeWp mgt10">
  43.                                       <div class="rangeWp scrollBar">
  44.                                           <div class="currenRange scrollTrack green" data-len="20" style="width: 0px;"></div>
  45.                                           <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
  46.                                       </div>
  47.                                   </div>
  48.                                   <div class="fl mgl30 f12 c555">
  49.                                       <input class="zxf_inp mgr5 currentValueInp lhl" type="text" value="${staAnalysisParam.lhl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
  50.                                   </div>
  51.                                </li>
  52.                                <li class="fl mgb40">
  53.                                    <em class="dp_va w100 t_r mgr15 fl f16 c222">及格率</em>
  54.                                   <div class="fl zxf_rangeJudgeWp mgt10">
  55.                                       <div class="rangeWp scrollBar">
  56.                                           <div class="currenRange scrollTrack orange" data-len="30" style="width: 0px;"></div>
  57.                                           <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
  58.                                       </div>
  59.                                   </div>
  60.                                   <div class="fl mgl30 f12 c555">
  61.                                       <input class="zxf_inp mgr5 currentValueInp jgl" type="text" value="${staAnalysisParam.jgl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
  62.                                   </div>
  63.                                </li>
  64.                                <li class="fl mgb40">
  65.                                    <em class="dp_va w100 t_r mgr15 fl f16 c222">低分率</em>
  66.                                   <div class="fl zxf_rangeJudgeWp mgt10">
  67.                                       <div class="rangeWp scrollBar">
  68.                                           <div class="currenRange scrollTrack red" data-len="40" style="width: 0px;"></div>
  69.                                           <em class="icon icon_thumb scrollThumb" style="margin-left: 0px;"></em>
  70.                                       </div>
  71.                                   </div>
  72.                                   <div class="fl mgl30 f12 c555">
  73.                                       <input class="zxf_inp mgr5 currentValueInp dfl" type="text" value="${staAnalysisParam.dfl?number*100}" readonly="readonly" style="height: 30px;line-height: 30px;width: 30px;">%
  74.                                   </div>
  75.                                </li>
  76.                            </ul>
  77.                        </div>
  79.                    </div> 
  80.                     <div class="zxf_setLevelWp"> 
  81.                         <ul class="zxf_setLevelUl t_l clearfix pdlr60">
  82.                             <li class="fl mgt60">
  83.                                 <em class="c222 f16 dp_va mgr20 w120 t_r">多科分数段</em>
  84.                                 <span class="dp_va c555 f14"><input class="zxf_inp fsd_d numInput" type="text" placeholder="请输入全科分数段" value="${staAnalysisParam.fsd_d}" style="width: 170px;"></span>
  85.                             </li> 
  86.                             <li class="fl mgt60">
  87.                                 <em class="c222 f16 dp_va mgr20 w120 t_r">名次段</em>
  88.                                 <span class="dp_va c555 f14"><input class="zxf_inp mcd numInput" type="text" placeholder="请输入名次段" value="${staAnalysisParam.mcd}" style="width: 170px;"></span>
  89.                             </li> 
  90.                             <li class="fl mgt60">
  91.                                 <em class="c222 f16 dp_va mgr20 w120 t_r">单科分数段</em>
  92.                                 <span class="dp_va c555 f14"><input class="zxf_inp fsd_s numInput" type="text" placeholder="请输入单科分数段" value="${staAnalysisParam.fsd_s}" style="width: 170px;"></span>
  93.                             </li> 
  94.                             <li class="fl mgt60">
  95.                                  <em class="c222 f16 dp_va mgr20 w120 t_r fl">单科统计设置</em>
  96.                                 <span class="selecterBox selecterStyle1 fl selectExamTypeDropBox" style="width:210px;">
  97.                                     <span class="selecterValue" style="line-height: 32px;height: 32px;">
  98.                                         <#if staAnalysisParam.statisticalCaliberSubject==2>
  99.                                         <p style="line-height: 32px;height: 32px;">零分和缺考都不统计</p>
  100.                                         <#else>
  101.                                         <p style="line-height: 32px;height: 32px;">缺考不统计</p>
  102.                                         </#if>
  103.                                         <input type="hidden" class="selRes statisticalCaliberSubject" value="${staAnalysisParam.statisticalCaliberSubject}">
  104.                                     </span>
  105.                                     <span class="selecterDrop" style="width: 110px;">
  106.                                         <a href="javascript:void(0);" value="1">缺考不统计</a>
  107.                                         <a href="javascript:void(0);" value="2">零分和缺考都不统计</a>
  108.                                     </span>
  109.                                 </span>
  111.                             </li> 
  112.                             <li class="fl mgt60">
  113.                                 <em class="c222 f16 dp_va mgr20 w120 t_r">多科统计设置</em>
  114.                                 <span class="dp_va c555 f14"><input class="zxf_inp statisticalCaliberMultiSubject" readonly="readonly" type="text" placeholder="1" value="1" style="width: 170px;"></span>
  115.                                 <p class="cb9b9b9 14 mgt5 pdl140">1  表示缺考不统计</p>
  116.                             </li> 
  117.                         </ul>
  118.                     </div>   
  119.                 </div>
  120.             </div> 
  121.             <!-- 满分(理科)设置 -->
  122.             <div class="zxf_tabCon mfljsz dis_none">
  123.                 <div class="zxf_mflkszCon w650">
  124.                     <div class="clearfix pdt50 pdb40">
  125.                         <h2 class="f24 c222 fl">满分(理科)</h2>
  126.                         <input class="zxf_inp cff8d8d sxfsFullScore1 numInput" value="${staAnalysisParam.sxfsFullScore1}"/>
  127.                     </div>
  128.                     <div class="zxf_setGradeWp">
  129.                         <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
  130.                             <ul class="zxf_setGradeList lksz">
  131.                               <#if scienceScore?? && (scienceScore?size gt 0)>
  132.                                 <#list scienceScore as map>
  133.                                      <#list map?keys as key>
  134.                                         <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
  136.                                             <span class="school_level t_l fl f16 c555 w_40">${key}</span>
  137.                                             <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
  138.                                             <span class="f16 fr">
  139.                                                 <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
  140.                                             <#if map_index gt 0>
  141.                                                 <em class="mglr5 cd9d9d9 dp_va">|</em>
  142.                                                 <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
  143.                                             </#if>
  144.                                             </span>
  145.                                         </li>
  146.                                        </#list>
  147.                                    </#list>
  149.                                    </#if>
  150.                             </ul>
  151.                         </div>
  152.                         <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
  153.                     </div>
  154.                 </div>
  155.             </div> 
  156.             <!-- 满分(文科)设置 -->
  157.             <div class="zxf_tabCon mfwksz dis_none">
  158.                 <div class="zxf_mflkszCon w650">
  159.                     <div class="clearfix pdt50 pdb40">
  160.                         <h2 class="f24 c222 fl">满分(文科)</h2>
  161.                          <input class="zxf_inp cff8d8d sxfsFullScore2 numInput" value="${staAnalysisParam.sxfsFullScore2}"/>
  162.                     </div>
  163.                     <div class="zxf_setGradeWp">
  164.                         <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
  165.                             <ul class="zxf_setGradeList wksz">
  166.                                   <#if artsScore?? && (artsScore?size gt 0)>
  167.                                 <#list artsScore as map>
  168.                                      <#list map?keys as key>
  169.                                         <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
  171.                                             <span class="school_level t_l fl f16 c555 w_40">${key}</span>
  172.                                             <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
  173.                                             <span class="f16 fr">
  174.                                                 <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
  175.                                             <#if map_index gt 0>
  176.                                                 <em class="mglr5 cd9d9d9 dp_va">|</em>
  177.                                                 <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
  178.                                             </#if>
  179.                                             </span>
  180.                                         </li>
  181.                                        </#list>
  182.                                    </#list>
  184.                                    </#if>
  185.                             </ul>
  186.                         </div>
  187.                         <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
  188.                     </div>
  189.                 </div>
  190.             </div>
  191.             <!-- 满分设置 -->
  192.             <div class="zxf_tabCon mfsz dis_none">
  193.                 <div class="zxf_mflkszCon w650">
  194.                     <div class="clearfix pdt50 pdb40">
  195.                         <h2 class="f24 c222 fl">满分</h2>
  196.                          <input class="zxf_inp cff8d8d sxfsFullScore0 numInput" value="${staAnalysisParam.sxfsFullScore0}"/>
  197.                     </div>
  198.                     <div class="zxf_setGradeWp">
  199.                         <div class="zxf_scrollBox_gradeLevel" style="position: relative;overflow: hidden;max-height:400px;">
  200.                             <ul class="zxf_setGradeList wlksz">
  201.                                <#if baseScore?? && (baseScore?size gt 0)>
  202.                                 <#list baseScore as map>
  203.                                      <#list map?keys as key>
  204.                                         <li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">
  206.                                             <span class="school_level t_l fl f16 c555 w_40">${key}</span>
  207.                                             <span class="fl grade t_l fl f20 cff8d8d w_40"><em>${map[key]}</em></span>
  208.                                             <span class="f16 fr">
  209.                                                 <a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>
  210.                                             <#if map_index gt 0>
  211.                                                 <em class="mglr5 cd9d9d9 dp_va">|</em>
  212.                                                 <a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>
  213.                                             </#if>
  214.                                             </span>
  215.                                         </li>
  216.                                        </#list>
  217.                                    </#list>
  219.                                    </#if>
  220.                             </ul>
  221.                         </div>
  222.                         <a href="javascript:;" class="zxf_addEleBtn c888 f16"><em class="mgr5">+</em>添加分数线</a>
  223.                     </div>
  224.                 </div>
  225.             </div>
  226.         </div>
  227.        <div class="zxf_btnWp bgfff t_c pdtb20">
  228.             <a href="javascript:;" class="zxf_bgBlue_btn zxf_stayBtn f16">保存</a>
  229.        </div>
  230.     </div>
  233.     <!-- 弹框 -->
  234.     <div class="zxf_popupEditGrede dis_none" id="gradeLevel">
  235.         <ul class="zxf_fromList">
  236.             <li class="clearfix mgb20 f16 c222 school_level">
  237.                 <em class="mgr20 fl t_r">名称：</em>
  238.                 <span class="fl">
  239.                     <input class="zxf_inp" type="text" value="一本">
  240.                 </span>
  241.             </li>
  242.             <li class="clearfix mgb20 f16 c222 grade">
  243.                 <em class="mgr20 fl t_r">分数：</em>
  244.                 <span class="fl">
  245.                     <input class="zxf_inp mgr20" type="text" value="484" style="width: 76px;">
  246.                     分
  247.                 </span>
  248.             </li>
  249.         </ul>
  250.     </div>
  251. </body>
  252. <script type="text/javascript" src="${cssPath}/v4/js/jquery.min.js"></script>
  253. <script type="text/javascript" src="${cssPath}/v4/js/fun.js"></script>
  254. <script type="text/javascript" src="${cssPath}/v4/js/jquery.artDialog.source.js"></script>
  255. <script type="text/javascript" src="${cssPath}/v4/js/My97DatePicker/WdatePicker.js"></script>
  256. <script type="text/javascript" src="${cssPath}/v4/js/echarts.min.js"></script>
  257.  <script type="text/javascript" src="${request.contextPath}/statics/lib/commonDialog.js" charset="utf-8"></script>
  258. <script>
  259.     $(".zxf_scrollBox_gradeLevel").perfectScrollbar();
  260.     $(".selecterBox").drop();
  261.     $(".selecterBox").Selector();    
  264.     $(function () {
  265.         sendMessage();
  266.     });
  267.     function sendMessage() {
  268.         var height = document.body.scrollHeight;
  269.         height += 20;
  270.         window.parent.postMessage(height,'*');
  271.     }
  272.     //tab
  273.     $(document).on("click", ".zxf_tabTit a", function(){
  274.         var $tabCon = $(this).parents(".zxf_tabTit").next(".zxf_tabConWp").find(".zxf_tabCon");
  275.         var idx = $(this).index();  
  276.         var $totalGrade = $tabCon.find(".totalGrade");
  277.         var $grade = $tabCon.eq(idx).find(".grade");
  278.         $(this).addClass("on").siblings().removeClass("on");
  279.         $tabCon.eq(idx).show().siblings().hide();
  280.         sendMessage();
  281.     });
  283.     //添加分数线
  284.     $(document).on("click", ".zxf_addEleBtn", function(){
  285.         var $setGrade = $(this).parents(".zxf_setGradeWp");
  286.         var $ul = $setGrade.find(".zxf_setGradeList");
  287.         var lastScore= parseInt($ul.find("li:last").find("em").html())-10;
  288.         var html = '';
  289.         html += '<li class="pdl20 pdr15 bor_d9d9d9 mgb20 clearfix">';
  290.         html += '<span class="school_level t_l fl f16 c555 w_40">一本</span>';
  291.         html += '<span class="fl grade t_l fl f20 cff8d8d w_40"><em>'+lastScore+'</em></span>';
  292.         html += '<span class="f16 fr">';
  293.         html += '<a href="javascript:;" class="zxf_editBtn c45a5fe dp_va">编辑</a>';
  294.         html += '<em class="mglr10 cd9d9d9 dp_va">|</em>';
  295.         html += '<a href="javascript:;" class="zxf_delBtn cff8d8d dp_va">删除</a>';
  296.         html += '</span>';
  297.         html += '</li>';
  298.         $ul.append(html);
  300.     });
  302.     //删除分数线
  303.     $(document).on("click", ".zxf_delBtn", function(){
  305.         var $li = $(this).parents("li");
  306.         $li.remove();
  308.     });
  310.     // 编辑分数线弹窗
  311.     $(document).on("click", ".zxf_editBtn", function(){
  312.         var that = this;
  313.         var $setGrade = $(that).parents(".zxf_setGradeWp");
  314.         var $totalGrade =  $setGrade.prev().find(".totalGrade");
  315.         var $ul = $setGrade.find(".zxf_setGradeList");
  316.         var totalGrade = 0;
  317.         var $li = $(that).parents("li");
  318.         var $school_level = $li.find(".school_level");
  319.         var $grade = $li.find(".grade").find("em");
  320.         var level = $school_level.text();
  321.         var grade = $grade.text();
  322.         var levelInp = $("#gradeLevel").find(".school_level").find(".zxf_inp")
  323.         var gradeInp = $("#gradeLevel").find(".grade").find(".zxf_inp")
  324.         levelInp.val(level);
  325.         gradeInp.val(grade);
  326.         var gradeLevel=document.getElementById('gradeLevel');
  327.         var artDialog=art.dialog({
  328.             lock: true,
  329.             fixed: true,
  330.             title: '编辑分数线',
  331.             content: gradeLevel,
  332.             width:'530px',
  333.             opacity: 0.6,
  334.             drag: false,
  335.             padding: '0px 25px',
  336.             ok: function() {
  337.                 var $li = $(that).parents("li");
  338.                 var $school_level = $li.find(".school_level");
  339.                 var $grade = $li.find(".grade").find("em");
  340.                 $school_level.text(levelInp.val());
  341.                 $grade.text(gradeInp.val());
  342.                 var $grade = $ul.find(".grade");
  343.                 $grade.each(function(){
  344.                     totalGrade += ($(this).find("em").text())*1;
  345.                 });
  346.                 $totalGrade.text(totalGrade + '分');
  347.             },
  348.             cancel: function() {},
  349.             init: function() {}
  350.         })
  351.     });
  352. </script>
  353. <script type="text/javascript"> 
  354.     $(function(){
  355.              var moveTag = true; // 决定mouseMove事件的执行
  356.         var maxValue = 100;    
  357.         var dataList = [];
  358.         var nowIndexTrack;
  359.         var nowIndexThumb;
  360.         var nowIndexInp;
  361.         var thisMaxWidth;
  362.         var thisMaxValue;
  363.         // var total = 0;
  364.         initZTSZ();
  365.         $(".scrollThumb").on("mousedown", function(e) {  
  366.             moveTag = true;  
  367.             var that = this;
  368.             var length = $(that).width()/2; 
  369.             var $scrollTrack = $(that).parent(".scrollBar").find(".scrollTrack");
  370.             var $currentValueInp = $(that).parents("li").find(".currentValueInp");
  371.             var $scrollBar = $(that).parents(".scrollBar");
  372.             var initValue = $scrollTrack.data("len");
  373.             var value = 0;   
  374.             nowIndexTrack = $scrollTrack.index('.scrollTrack')
  375.             nowIndexThumb = $(this).index('.scrollThumb')
  376.             nowIndexInp = $currentValueInp.index('.currentValueInp')
  377.             $(document).mousemove(function(e) {
  378.                 if (moveTag === false) return;
  379.                 if(nowIndexTrack==0){
  380.                      var changeX = e.clientX - length - $(".zxf_rangeJudgeWp").offset().left;
  381.                     $('.scrollTrack').eq(nowIndexTrack).data("len", changeX);
  382.                     $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollTrack.data("len") + 3 + "px");
  383.                     $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollTrack.data("len") + "px");
  384.                     if (($scrollTrack.data("len") + 14) >= $scrollBar.width()) { // "14":为thumb的宽度 临界最小值
  385.                         $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollBar.width() + 3 + "px");
  386.                         $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollBar.width() - length + "px");
  387.                         value = maxValue;
  388.                     } else if ($scrollTrack.data("len") <= 0) { //临界最小值
  389.                         $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", "0px");
  390.                         $('.scrollTrack').eq(nowIndexTrack).css("width", "0px");
  391.                         value = 0;
  392.                         $scrollTrack.data("len", 0);
  393.                         moveTag = false;
  394.                     } else {
  395.                        value = Math.round(100 * ($scrollTrack.data("len") / $scrollBar.width()).toFixed(2));
  396.                     }
  397.                     $(".currentValueInp").eq(nowIndexInp).val(value);
  398.                 }else{
  399.                      var lwidth=$('.scrollThumb').eq(nowIndexThumb-1).css("marginLeft");
  400.                      lwidth=lwidth.substring(0,lwidth.length-2);
  401.                      var changeX = e.clientX - length - $(".zxf_rangeJudgeWp").offset().left;
  402.                      if(lwidth>=changeX){
  403.                           $('.scrollTrack').eq(nowIndexTrack).data("len", changeX);
  404.                         $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollTrack.data("len") + 3 + "px");
  405.                         $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollTrack.data("len") + "px");
  406.                         if (($scrollTrack.data("len") + 14) >= $scrollBar.width()) { // "14":为thumb的宽度 临界最小值
  407.                             $('.scrollTrack').eq(nowIndexTrack).css("width", $scrollBar.width() + 3 + "px");
  408.                             $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", $scrollBar.width() - length + "px");
  409.                             value = maxValue;
  410.                         } else if ($scrollTrack.data("len") <= 0) { //临界最小值
  411.                             $('.scrollThumb').eq(nowIndexThumb).css("marginLeft", "0px");
  412.                             $('.scrollTrack').eq(nowIndexTrack).css("width", "0px");
  413.                             value = 0;
  414.                             $scrollTrack.data("len", 0);
  415.                             moveTag = false;
  416.                         } else {
  417.                            value = Math.round(100 * ($scrollTrack.data("len") / $scrollBar.width()).toFixed(2));
  418.                         }
  419.                         $(".currentValueInp").eq(nowIndexInp).val(value);
  420.                      }
  421.                 }
  425.             });
  426.         });
  427.         $(document).mouseup(function() {
  428.             moveTag = false;
  429.         });
  432.     });
  434.     function initZTSZ() {
  435.         $(".scrollTrack").each(function() { //初始化
  436.             var $scrollBar = $(this).parents(".scrollBar");
  437.             var $Thumb = $(this).next(".scrollThumb");
  438.             var $inp = $(this).parents("li").find(".currentValueInp");
  439.             var slb = parseFloat($inp.val());
  440.             var len = slb / 100 * $scrollBar.width();
  441.             $Thumb.css("marginLeft", len + "px");
  442.             $(this).css("width", len + 2 + "px");
  443.         });
  444.     }
  446.     //保存
  447.     $(".zxf_bgBlue_btn").on("click", function() {
  448.         //参数校验
  449.         var checkRes=paramCheck();
  450.         if(!checkRes.flag){
  451.             artContent(checkRes.msg);
  452.             return;
  453.         }
  454.         //获取数据
  455.         var data = getData();
  456.         $.ajax({
  457.             url: "/param/updateParam",
  458.             type: "POST",
  459.             data: data,
  460.             async: false,
  461.             success: function(data) {
  462.                 if (data.code == "1") {
  463.                     artContent("保存成功");
  464.                     //window.location.reload();
  465.                 } else {
  466.                     artContent(data.msg);
  467.                     //layer.msg(data.msg);
  468.                 }
  469.             },
  470.             error: function(msg) {
  471.                 artContent("参数为空或请求服务器错误");
  472.                 //layer.msg('服务器忙,请稍后重试');
  473.             }
  474.         });
  476.     })
  478.     function getData() {
  479.         var yxl = $(".yxl").val() / 100;
  480.         var lhl = $(".lhl").val() / 100;
  481.         var jgl = $(".jgl").val() / 100;
  482.         var dfl = $(".dfl").val() / 100;
  483.         var fsd_s = $(".fsd_s").val();
  484.         var mcd = $(".mcd").val();
  485.         var fsd_d = $(".fsd_d").val();
  486.         //单科统计设置
  487.         var statisticalCaliberSubject = $(".statisticalCaliberSubject").val();
  488.         var statisticalCaliberMultiSubject = 1;
  489.         var sxfsFullScore0 = $(".sxfsFullScore0").val();
  490.         var sxfsFullScore1 = $(".sxfsFullScore1").val();
  491.         var sxfsFullScore2 = $(".sxfsFullScore2").val();
  492.         var sxfs0 = JSON.stringify(getwlksz($(".wlksz")));
  493.         var sxfs1 = JSON.stringify(getwlksz($(".lksz")));
  494.         var sxfs2 = JSON.stringify(getwlksz($(".wksz")));
  495.         return {
  496.             "yxl": yxl,
  497.             "lhl": lhl,
  498.             "jgl": jgl,
  499.             "dfl": dfl,
  500.             "fsd_s": fsd_s,
  501.             "fsd_d": fsd_d,
  502.             "mcd": mcd,
  503.             "statisticalCaliberSubject": statisticalCaliberSubject,
  504.             "statisticalCaliberMultiSubject": statisticalCaliberMultiSubject,
  505.             "sxfsFullScore0": sxfsFullScore0,
  506.             "sxfsFullScore1": sxfsFullScore1,
  507.             "sxfsFullScore2": sxfsFullScore2,
  508.             "sxfs0": sxfs0,
  509.             "sxfs1": sxfs1,
  510.             "sxfs2": sxfs2,
  511.             "examId": $("#examId").val()
  513.         };
  514.     }
  515.     //获取文理科设置
  516.     function getwlksz(obj) {
  517.         var lksz = {};
  518.         $(obj).find("li").each(function() {
  519.             var key = $(this).find("span").eq(0).html();
  520.             var value = $(this).find("span").eq(1).find("em").html();
  521.             lksz[key] = value;
  522.         })
  523.         return lksz;
  524.     }
  526.     //对numInput进行校验数字
  527.     $(".numInput").keyup(function(){
  528.         var num=$(this).val();
  529.         var flag=num.match(/^[0-9]*$/);
  530.         if(flag==null){
  531.             artContent("请输入整数！")
  532.             $(this).val('');
  533.         }
  534.     })
  536.     function paramCheck() {
  537.         var yxl = $(".yxl").val();
  538.         var lhl = $(".lhl").val();
  539.         var jgl = $(".jgl").val();
  540.         var dfl = $(".dfl").val();
  541.         var fsd_s = $(".fsd_s").val();
  542.         var mcd = $(".mcd").val();
  543.         var fsd_d = $(".fsd_d").val();
  545.         var sxfsFullScore0 = $(".sxfsFullScore0").val();
  546.         var sxfsFullScore1 = $(".sxfsFullScore1").val();
  547.         var sxfsFullScore2 = $(".sxfsFullScore2").val();
  549.         if (yxl == "") {
  550.             return { "flag": false, "msg": "ylx不能为空" }
  551.         }
  552.         if (lhl == "") {
  553.             return { "flag": false, "msg": "lhl不能为空" }
  554.         }
  555.         if (jgl == "") {
  556.             return { "flag": false, "msg": "jgl不能为空" }
  557.         }
  558.         if (dfl == "") {
  559.             return { "flag": false, "msg": "dfl不能为空" }
  560.         }
  561.         dfl=parseFloat(dfl);
  562.         jgl=parseFloat(jgl);
  563.         lhl=parseFloat(lhl);
  564.         yxl=parseFloat(yxl);
  565.         if (!(dfl > 0 && dfl <= jgl && jgl < lhl && lhl < yxl && yxl< 100)) {
  566.             return { "flag": false, "msg": "不满足0 <dfl <=jgl <lhl <yxl <100这个关系" }
  567.         }
  569.         if (fsd_s == "") {
  570.             return { "flag": false, "msg": "单科分数段不能为空" }
  571.         }
  572.         if (fsd_d == "") {
  573.             return { "flag": false, "msg": "多科分数段不能为空" }
  574.         }
  575.         if (mcd == "") {
  576.             return { "flag": false, "msg": "名次段不能为空" }
  577.         }
  578.         if (sxfsFullScore0 == "") {
  579.             return { "flag": false, "msg": "满分不能为空" }
  580.         }
  581.         if (sxfsFullScore1 == "") {
  582.             return { "flag": false, "msg": "满分（理）不能为空" }
  583.         }
  584.         if (sxfsFullScore2 == "") {
  585.             return { "flag": false, "msg": "满分（文）不能为空" }
  586.         }
  587.         var res1=checkwlksz($(".wlksz"));
  588.         if(!res1.flag){
  589.             return res1;
  590.         }
  591.         var res2=checkwlksz($(".lksz"));
  592.         if(!res2.flag){
  593.             return res2;
  594.         }
  595.         var res3=checkwlksz($(".wksz"));
  596.         if(!res3.flag){
  597.             return res3;
  598.         }
  599.         return { "flag": true }
  600.     }
  602.     //获取文理科设置
  603.     function checkwlksz(obj) {
  604.         var tempArr=[];
  605.         var keyArr = [];
  606.         var valuesArr = [];
  607.         $(obj).find("li").each(function() {
  608.             var key = $(this).find("span").eq(0).html();
  609.             var value = $(this).find("span").eq(1).find("em").html();
  610.             value=parseInt(value);
  611.             if (key == "") {
  612.                 tempArr.push({ "flag": false, "msg": "满分设置类别不能为空" });
  613.             }
  614.             if (value == "") {
  615.               tempArr.push({ "flag": false, "msg": "满分设置类别对应的分数值不能为空" });
  616.             }
  617.             if (keyArr.length > 0 && $.inArray(key, keyArr) >= 0) {
  618.                tempArr.push({ "flag": false, "msg": "满分设置" + key + "重复" });
  619.             }
  620.             if (valuesArr.length > 0 && valuesArr[valuesArr.length - 1] <= value) {
  621.               tempArr.push({ "flag": false, "msg": "满分设置类别对应的分数大小关系错误重复" });
  623.             }
  624.             keyArr.push(key);
  625.             valuesArr.push(value);
  626.         })
  627.         if(tempArr.length>0){
  628.             return tempArr[0];
  629.         }
  630.         return { "flag": true };
  632.     }
  637. </script>
  638. </html>

其中

  1. $(function () {
  2.         sendMessage();
  3.     });
  4.     //向父页面发送消息
  5.     function sendMessage() {
  6.         var height = document.body.scrollHeight;
  7.         height += 20;
  8.         window.parent.postMessage(height,'*');
  9.     }

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

发表评论

表情：
评论列表 （有 0 条评论，496人围观）

还没有评论，来说两句吧...

相关阅读

    相关 iframe自适应高度

    [JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。 如果内容是固定的，

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 396 阅读