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

最新推荐文章于 2023-09-20 15:35:08 发布

面条请不要欺负汉堡

最新推荐文章于 2023-09-20 15:35:08 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签：嵌套页面传参parent.body.data

本文链接：https://blog.youkuaiyun.com/gao_xu_520/article/details/79126189

jquery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种利用jQuery在父页面与子页面之间传递数据的方法。通过将数据存储在父页面的body元素中，子页面可以通过jQuery获取这些数据并进行展示。此方法适用于有嵌套关系的页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.分析

父页面： 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>