JS window.open跨页面子页面向父页面传值

和风微凉

已于 2023-08-30 10:41:21 修改

阅读量952

点赞数

分类专栏： Web前端文章标签： javascript 前端

于 2023-03-17 13:48:04 首次发布

本文链接：https://blog.csdn.net/qq_45609680/article/details/129618950

版权

Web前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

该文章演示了如何使用JavaScript在父页面和子页面之间进行数据交互。通过点击按钮在父页面打开子页面，然后在子页面中获取用户输入的数据，调用父页面的函数将数据传回并更新父页面的输入框值。如果数据为空，则显示错误提示。

摘要由CSDN通过智能技术生成

直接写个栗子：

父页面A：

//点击打开页面
<button onclick="open()">打开</button>
<input id="person1" name="" type="text" value=""/>
<input id="person2" name="" type="text"  value=""/>


<script>
    //打开页面
    function open(){
        window.open( 'url' , 'name' , 'features' );
    }
 
    //在子页面中调用此方法
   function DataPerson( person1data,person2data){
        //这里判断从子页面传过来的值不为空
        if( (typeof person1data!= 'undefined' && person1data!= null && person1data!= '')&&(typeof person2data!= 'undefined' && person2data!= null && person2data!= '') ){
         $('#person1').attr('value',person1data)
         $('#person2').attr('value',person2data)
        }else{
            alert('error');
        }  
    }
</script>

子页面B:

<button onclick="submit()">确定/提交</button>
<input id="zhangsan" name="" type="text" value="张三"/>
<input id="lisi" name="" type="text" value="李四"/>

<script>
	submit(){		
		//这里先获取子页面（当前页面）的数据,
	    var person=$(#zhangsan).val();
        var value=$(#lisi).val();
        //获取到当前子页面数据后传到父页面  注意这里调用父页面对应的方法
		window.opener.DataPerson( person，value);
		window.close();
	}
</script>