Can V3d receive window.postMessage events?

This topic has 11 replies, 5 voices, and was last updated 6 months, 3 weeks ago by kdv.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
2020-08-13 at 5:48 pm #31520

grimmy
Customer

I am told this is a good way to communicate between iframes and the current page but I cant find anything in puzzle to listen to such events.

Is there a way?

Thanks

2020-08-14 at 7:41 am #31534

Yuri Kovelenov
Staff

Hi,

there is no such puzzles yet, sorry, but you can implement this with JavaScript and link with the Puzzles as show here:
https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html

Chief 3D Verger | LinkedIn | Twitter

2020-08-14 at 12:47 pm #31551

grimmy
Customer

Thanks for this but I tried a few variations and cant get it to work. Maybe my situation is slightly different to those described in the manual(?):

I have a parent app which has the verge3d app embedded as an iframe. I want the parent app to perform some function on the v3d<iframe>. Im using postMessage from the parent app to send something to the iframe but I’m just not sure how the v3d iframe picks up the message.

2020-08-14 at 3:03 pm #31553
grimmy
Customer
I have the solution for anyone wishing to try the same thing:

In my parent app I send the message like so:
```
var myIframe = document.getElementById('v3d_iframe');//Note:I have set the ID of my iframe to v3d_iframe

myIframe.contentWindow.postMessage('myMsg', '*');
```
In my awesom_application.js script I make a message listener like so:
```
window.onmessage = function(event){
    if (event.data == 'myMsg') {
        console.log('myMsg Message received!');
    }
};
```
However I still don’t know how I would go about sending more data (variables) to the v3d window…if anyone has any ideas let me know..
2020-08-14 at 4:11 pm #31557
grimmy
Customer
In order to send a bunch of data to the v3d iframe you can do this:

Parent:
```
var myIframe = document.getElementById('v3d_iframe');
myIframe.contentWindow.postMessage(
    {
        event_id: 'myMessage',
        data: {
            v1: 'value1', 
            v2: 'value2'
        }
    }, 
    "*" ); 
```
v3d iFrame (in my_awesome_app.js for example):
```
window.onmessage =  function(event) {
    if(event.data.event_id === 'myMessage'){
        console.log(event.data.data);
    }
};
```
2020-08-15 at 7:10 am #31573

Yuri Kovelenov
Staff

Awesome! Thank you for sharing your solution!

Chief 3D Verger | LinkedIn | Twitter

2023-04-25 at 2:06 pm #63266

solid
Customer

it turns out that the data can be transferred back?

Webgl Interactive Development https://www.blend3dweb.ru/

2023-04-25 at 2:26 pm #63267

kdv
Participant

solid wrote:

the data can be transferred back

What do you mean? Back to where?

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2023-04-25 at 2:38 pm #63268
solid
Customer
passing window.postmessage to the parent page

window.parent.postMessage('scene_loaded', "*");
- This reply was modified 1 year, 8 months ago by solid.
Webgl Interactive Development https://www.blend3dweb.ru/
2023-04-25 at 2:40 pm #63270

kdv
Participant

You may try. I suppose it’s quite possible.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2024-06-05 at 1:35 pm #74577

rainman
Customer

Could the receiving code be placed in a “ecec script” puzzle. Also would this method fix my cross origin policy issues.

2024-06-05 at 3:03 pm #74578

kdv
Participant

rainman wrote:

Also would this method fix my cross origin policy issues.

No. JS in iFrame won’t work.

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.
Author

Posts