前端必会技能,子页面给父页面赋值

                 经常可能你会看到,父页面中的某个文本框一点击,就跳入到一个新页面(称之为子页面),子页面中点击某个按钮,子页面关闭,父页面的文本框中已经获得刚刚子页面中的值。

 

1. 父页面中给文本框添加一个单击事件。这个单击事件中必须以如下方式打开子页面:

    ​window.open('xxxx.html');//其中xxxx为子页面

2.子页面中这样给父页面文本框赋值:

    ​ window.opener.document.getElementById("父页面中文本框的Id").value = 需要传给父页面的值;

    ​  window.close();

至此,就实现了子页面给父页面传值。下面上代码:

-----------------代码start--------------------

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>根据地址查询经纬度</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

    <script>

 

 

        // window.opener.document.getElementById("父页面元素的id").value = '子页面填写的值'

 

    </script>

</head>

<body style="background:#CBE1FF">

<div>

<!--<div style="width:730px;margin:auto;">-->

    要查询的地址:<input id="text_" type="text" value="九里堤交桂二巷" style="margin-right:0px;" />

    <!--查询结果(经纬度):<input id="result_" type="text" />-->

    <input type="button" value="查询" οnclick="searchByStationName();" />

    <input type="submit" value="确定" οnclick="getJWD()"/>

    <br/>

    <!--<div id="container" style="position: absolute;-->

    <!--margin-top:30px;-->

        <!--width: 730px;-->

        <!--height: 590px;-->

        <!--top: 50px;-->

        <!--border: 1px solid gray;-->

        <!--overflow:hidden;">-->

    <!--</div>-->

    <div id="container" style="position: absolute;

    margin-top:30px;

        width: 100%;

        height: 100%;

        top: 50px;

        border: 1px solid gray;

        overflow:hidden;">

    </div>

</div>

</body>

<script type="text/javascript">

    var jwdVal;

    var map = new BMap.Map("container");

    map.centerAndZoom("成都", 15);

    // map.enableScrollWheelZoom(true); //启用滚轮放大缩小,默认禁用

    map.enableScrollWheelZoom();

    // map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用

    map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件

    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件

    map.addControl(new BMap.OverviewMapControl({

        isOpen: true,

        anchor: BMAP_ANCHOR_BOTTOM_RIGHT

    })); //右下角,打开

    var localSearch = new BMap.LocalSearch(map);

    // localSearch.enableAutoViewport(); //允许自动调节窗体大小

    function searchByStationName() {

        map.clearOverlays(); //清空原来的标注

        var keyword = document.getElementById("text_").value;

        localSearch.setSearchCompleteCallback(function(searchResult) {

            var poi = searchResult.getPoi(0);

            //document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;

            jwdVal = poi.point.lng + "," + poi.point.lat;

            map.centerAndZoom(poi.point, 13);

            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注,为要查询的地方对应的经纬度

            map.addOverlay(marker);

            marker.enableDragging();

            var content = document.getElementById("text_").value + "<br/><br/>经度:" + poi.point.lng + "<br/>纬度:" + poi.point.lat;

            var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");

            marker.addEventListener("click", function() {

                this.openInfoWindow(infoWindow);

            });

            marker.addEventListener("dragend", function(e){                    //拖拽标注获取标注坐标

                // alert("当前位置:" + e.point.lng + ", " + e.point.lat);           //可拖拽的标注

                // document.getElementById("result_").value = e.point.lng + ", " + e.point.lat;

                jwdVal = e.point.lng + ", " + e.point.lat;

            }

        );

 

        });

        localSearch.search(keyword);

    };

//将子页面中获取到的值,赋值到父页面的文本框中。

    function getJWD(){

//proLocation为父页面中文本框的id

        window.opener.document.getElementById("proLocation").value = jwdVal;

        window.close();

    };

</script>

</html>

-----------------代码end---------------------

 

喜欢编程的朋友,欢迎和我交流,微 信 公 众 号:“软件编程网站开发

 

 

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_1170407931

感谢各位小可爱的支持,谢谢啦

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值