嵌套页面传参parent.$("body").data();

清疚 2021-09-14 14:52 257阅读 0赞

一.分析

父页面： parent.$("body").data("aintt\_val", str);  // 存储参数

子页面：var str = parent.$("body").data("aintt\_val");//取参数

$("\#bdiv").html(str); //显示内容

二注意

1.此方法俩个页面必须是嵌套关系（也可以用layer 中iframe层的显示）

2. parent.$("body").data("aintt\_val", str);  中的 aintt\_val 是可以随意设置 （是数据str 的名称） str是数据

3.子页面是获取数据str的名称，从而得到数据

4.jQuery.data() 参考

三.列子

1.jsonForm.txt

{
    	"brxm00": "陈步卜",
    	"brxb00": "男",
    	"age": "25岁",
    	"sqysxm":"吴聊聊",
    	"sqrqsj": "2018-01-17 10:36:17",
    	"txm000": "2018011711",
    	"zyhghh": "0987654321",
    	"cjrxm0":"莫年华",
    	"pyrq00": "2018-01-18",
    	"pysj00": "15:36:18",
    	"ch0000": "34556",
    	"sqksmc": "急诊科",
    	"shrq00": "2018-01-16",
    	"shsj00": "15:36:00",
    	"bblxmc":"血清",
    	"dyrq00":"2018-01-18",
    	"dysj00":"13:54:10",
    	"pyr000":"吴晓峰",
    	"shr000":"沈天明"
    }

2.index.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    	<title>test</title>
    	<script src="jQuery-2.1.4.min.js"></script>
    </head>
    <body>
    <div>
    	<div>
    		<input id="aintt" type="text" />
    		<input id="abtn" type="button" value="测试"/>
    	</div>
    	<div>
    		<iframe id="iframe" style="width:400px;height:300px;"></iframe>
    	</div>
    </div>
    </body>
    <script>
    $(function(){
    	$("#abtn").on("click",function(){
    		var str = $("#aintt").val();//1.直接输入值传过去
    		if(!str){
    			str="未输入，默认为空。";
    		}
    		parent.$("body").data("aintt_val", str);//1.1存储直接输入的值
    		$.getJSON('jsonForm.txt',function(data){  //2.获取json数据 
    	             var obj=data;
    	             parent.$("body").data("jsonForm_val", obj);//2.2  存储json数据
    	        }); 
    		
    		$("#iframe").attr("src","./child1.html?22");//嵌套页面
    		
    	});
    
    });
    </script>
    </html>

2.child1.html

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    	<title>test</title>
    	<script src="jQuery-2.1.4.min.js"></script>
    </head>
    <body>
    <div>
    	<div>从index.html传过来的值为：<lable id="bdiv"></label></div>
    	<h1>json传值过来：</h1>
    	<form class="print-info clearfix" id="print-info">  
            <div class="print-info-row">  
                <label>姓名:</label>  
                <input type="text" name="brxm00" value="小小高">  
            </div>  
            <div class="print-info-row" style="width: 190px;">  
                <label>门  诊  号:</label>  
                <input type="text" name="zyhghh" value="12345678" >  
            </div>  
            <div class="print-info-row"  style="width: 214px;">  
                <label>申请医生:</label>  
                <input type="text" name="sqysxm" value="小高高" >  
            </div>  
             <div class="print-info-row"  style="width: 220px;margin: 0px 0 0px;">  
                <label>申请时间:</label>  
                <input type="text" name="sqrqsj" value="2018-01-16 10:36" >  
            </div>  
            <div class="print-info-row">  
                <label>性别:</label>  
                <input type="text" name="brxb00" value="女">  
            </div>  
        </form>  
    </div>
    </body>
    <script>
    $(function(){
    	var str = parent.$("body").data("aintt_val");//1.取出父页面直接输入的值
    	$("#bdiv").html(str);//1.1直接显示 父页面输入的值
    	var obj= parent.$("body").data("jsonForm_val");//2.取出父页面穿过来的json数据
    	$("#print-info").setForm(obj);  //2.2把json数据现在form中
    });
    $.fn.setForm = function(jsonValue){    
        var obj=this;    
        $.each(jsonValue, function (name, ival) {    
            var $oinput = obj.find("input[name=" + name + "]");     
            if ($oinput.attr("type")== "radio" || $oinput.attr("type")== "checkbox"){    
                 $oinput.each(function(){    
                     if(Object.prototype.toString.apply(ival) == '[object Array]'){//是复选框，并且是数组    
                          for(var i=0;i<ival.length;i++){    
                              if($(this).val()==ival[i])    
                                 $(this).attr("checked", "checked");    
                          }    
                     }else{    
                         if($(this).val()==ival)    
                            $(this).attr("checked", "checked");    
                     }    
                 });    
            }else if($oinput.attr("type")== "textarea"){//多行文本框    
                obj.find("[name="+name+"]").html(ival);    
            }else{    
                 obj.find("[name="+name+"]").val(ival);     
            }    
       });    
    }  
    </script>
    </html>

![SouthEast][]

[SouthEast]: /images/20210813/1b0dcbc0e236437482caaa4fcd6b4da9.png