如何将数据从父页面传递到弹出窗口？

父页面：

<!DOCTYPE html> 

    <html> 
     <head> 
     </head> 
     <body> 
     <a href=# onclick='showMap()'>show map <a> 
     <div id="map-canvas"></div> 
     </body> 
     <script> 
     function showMap(){ 

     window.open('map.html','map','width=600,height=400'); 
     } 
     </script> 
    </html>

map.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Info windows</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 


function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Uluru (Ayers Rock)' 
    }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

正如你可以看到我使用的地图标记渲染硬编码值：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

我可以将这些值从父页面传递给弹出窗口吗？

来源

2014-10-28 gstackoverflow

既然你这么问是如何从父母传递给弹出一个选择是查询字符串参数：

<a href=# onclick='showMap(-25.363882,131.044922)'>show map <a> 

function showMap(lat,lng){ 
window.open('map.html?lat='+lat+'&lng ='+lng,'map','width=600,height=400'); 
}

然后在map.html收集这些价值观和使用..

更新：收集查询字符串值可以在很多方面做见

function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
     results = regex.exec(location.search); 
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 
     var lat = getParameterByName('lat'); 
     var lon = getParameterByName('lon');

取自一个快速搜索选项：https://stackoverflow.com/a/901144/306921

您还可以看看：Get query string parameters with jQuery

我测试和它的所有工作：

造成的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
    <a href=# onclick='showMap(-25.363882,131.044922)'>show map <a> 
    <div id="map-canvas"></div> 
    </body> 
    <script> 
    function showMap(lat,lng){ 
    window.open('map.html?lat='+lat+'&lng ='+lng,'map','width=600,height=400'); 
    } 
    </script> 
</html>

所得map.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Info windows</title> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
    function getParameterByName(name) { 
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), 
      results = regex.exec(location.search); 
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
    } 
      var lat = getParameterByName('lat'); 
      var lon = getParameterByName('lon'); 

    function initialize() { 
     var myLatlng = new google.maps.LatLng(lat, lon); 
     var mapOptions = { 
     zoom: 4, 
     center: myLatlng 
     }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 


    var marker = new google.maps.Marker({ 
     position: myLatlng, 
     map: map, 
     title: 'Uluru (Ayers Rock)' 
    }); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

来源

2014-10-28 07:04:29 wooer

你能提供的示例如何收集里面弹出这些值开？ – gstackoverflow 2014-10-28 07:07:17

请参阅我的答案中的更新 – wooer 2014-10-28 07:14:20

QueryString是一个好方法。不过，根据您的要求，您还可以将其存储在父页面中，并通过javascript读取。

使用DOM存储在父页面值：

<input type="hidden" id="lat" value="...."/>

您也可以在google找到如何存储与窗口对象本身（例如window.myVar =“XXX”），并从弹出阅读它的数据向上。

访问在弹出的页面值通过window.open

var lat =window.opener.getElementById("lat").value;//use window.parent if opened as iframe

来源

2014-10-28 07:15:04 Amitesh

如何将数据从父页面传递到弹出窗口？

回答

相关问题