Я хотел бы получить некоторую информацию из API карт Google. Я написал функцию в googleMap.html
файле и хочу вернуть значения:
My React's componentDidMount
:
componentDidMount() {
this.iFrameNode = ReactDOM.findDOMNode(this.refs.iframe);
this.iFrameNode.onload = () => {
const promise1 = new Promise(resolve => {
window.addEventListener('message', data => {
resolve(data);
});
const iFrameNode = ReactDOM.findDOMNode(this.refs.iframe);
iFrameNode.contentWindow.postMessage({}, '*');
});
promise1.then(value => {
console.log(`visibleMarkers: ${value}`);
});
};
},
Google maps Код iFrame:
function getVisibleMarkers(mapInstance, markers) {
const mapBounds = mapInstance.getBounds();
return markers.filter(marker => mapBounds.contains(marker.getPosition()));
}
function handlePostMessage(message) {
const visibleMarkers = getVisibleMarkers(window.googleMapsInstance, window.googleMapsMarkerInstance);
window.parent.postMessage(JSON.stringify(visibleMarkers), '*')
}
function initialize() {
window.addEventListener('message', handlePostMessage, false);
}
Сообщение сообщения от родителя в iFrame работает правильно, и вычисленное значение является правильным. Проблема в CORS в команде window.parent
. Я получил эту ошибку:
Uncaught DOMException: Blocked a frame with origin "https://static.parastorage.com" from accessing a cross-origin frame.
Что я делаю не так? Есть ли другой способ связи между моим сайтом и iFrame google-maps?