如何將數據從父頁面傳遞到彈出窗口？

父頁面：

<!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

如何將數據從父頁面傳遞到彈出窗口？

回答

相關問題