How to get variable from iframe with javascript ?

Hello,

I am a non-developer who is gradually learning to read javascript but I still have a lot of trouble.

I'm trying to create an interactive map and especially to retrieve information from it.

I found an example that I customized: I integrated this HTML / Javascript map in an Iframe, to get a result like this :

The departure route is fixed, the arrival route changes and is calculated based on where you click.

I hid my token id but here is the code:

https://justpaste.it/9ihsy

what I cannot do is therefore retrieve information such as travel time

It blocks me a lot and I spend a lot of hours browsing the forum without finding a solution to this problem. I have to use a function? but if so, how to write it in javascript and what to write in the events to retrieve the variable?

Is it in an iframe that I have to put this code to retrieve the variables?

After that, I would like to be able to do the reverse and create a variable from the events to insert it into the javascript code. Is this also possible? (in iframe or otherwise?)

Thank you very much for the help.

Hello,

I tried this with no success to get the coordinates of the end route :

document.getElementById("iframeTest".contentWindow.getRoute(end). coordinates

But it still doesn't work..

(IframeTest is the name of my iframe)

Thank you

For security reasons, browsers block access to cross-origin (i.e. different domain) iframes.

The only way you can get data from a cross-origin iframe is via the postMessage API - and the iframe page must be specifically coded to receive messages and send back the information you want. If it doesn't already do that and you don't control the iframe page, it's not possible to get any information from it.

Hello Ashley,

I was not expecting a return from you so already thank you for this fabulous tool (which I do not yet fully master but which I love learning to use!)

Now for my question, thanks for the feedback.

I wasted a lot of time trying it out when in fact it is not possible in the iframe I am looking to generate, at least now I know it!

I need to display a map of the country by being able to change the variables (coordinates) and retrieve the values ​​that it displays.

So, like that does not work in javascript iframe, is it technically possible to turn to another alternative such as the SDK offered by Mapbox :

docs.mapbox.com/android/maps/guides/install

or construct 3 doesn't allow that?

I know I'm going to spend a lot of time on it figuring out how it works so I'd rather be sure it's possible haha

Again, thank you.

You linked to the documentation for Android apps, which you can't use in a browser. But if they provide a JavaScript API, it might be possible with that. I can't say for sure though, since it depends on their service. It would be best to direct questions about their service to them.

Sorry i forgot to specify that it would be for an android / ios application.

In Construct, you are effectively still working in a browser on mobile (via a webview), and Cordova wraps the Android/iOS specific parts. So you either have to still code it like you would in the browser, or you'd need a Cordova plugin to use it in an app. Again this is something you'd need to talk to them about.

Ooooh it is much clearer on this point now!

Mapbox does provide a JavaScript API but I'm not sure if we can or how to "extract" the data from JavaScript to construct.

I will continue to document myself, hoping to find a solution.

Thanks again for the help