How to communicate between v3d iframe and other HTML pages?

Tagged: Html

This topic has 7 replies, 4 voices, and was last updated 2 months ago by bigmike814.

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

Author

Posts
2024-01-20 at 2:40 pm #69824
Lee
Customer
Hi, When I embed a v3d code in my webflow project and try to host them on our own hosting server (with HTML, CSS, Javascript exported), it throws me an error saying ”
DOMException: Failed to read a named property ‘document’ from ‘Window’: Blocked a frame with origin “https://cdn.soft8soft.com” from accessing a cross-origin frame.”

This seems happens because I am not hosting custom html and javascript files on the verge3d network, but on my own hosting server (like ecommerce platform like shopify), it gives me Same-Origin Policy error. Accrording to Stackoverflow, they suggested a workaround this issue by using window.postMessage and window.eventlistener to avoid this iframe-cross domain access issues.

https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame

I assume that verge3d’s wordpress plugin encapsulated this approach already in the plugin source code to allow them to be hosted on custom hosting server.

Do we have any guide or step by step approach how to add this workaround in our both sides (one for main page, the other for in the iframe)? Or any other suggestion here?

For your reference, another web-based 3d configurator service called Vectary provides this ModelAPI so that users can easily make them communicate without barrier by adding this code “listenToChangesFromModel(); listenToChangesFromUI();0”

https://help.vectary.com/custom-code

Thanks for your help and techniques in advance.
Attachments:
1. fdf.png
2024-01-20 at 2:53 pm #69826

kdv
Participant

Lee wrote:

Blocked a frame with origin “https://cdn.soft8soft.com” from accessing a cross-origin frame.

Why are you loading the app’s files from soft8soft.com? Can’t you upload them to your server? It will solve your problem.

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-01-20 at 4:22 pm #69834

Lee
Customer

Thank you Kdv for the quick answers!
Let me try as you suggested.

Just one clarification by the way. My FTP server doesn’t support file type like .blender and .gltf but only support like html, css, and javascript..

Would it still work when we upload app’s files without those files?

2024-01-20 at 4:27 pm #69835

kdv
Participant

Without .blend files – yes (they are not needed at all when running WebGL apps), without .gltf/.bin – NO.

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.

2025-07-15 at 4:57 pm #83119
c4cc
Customer
If verge3d iframe is embedded in another HTML document, how can I join HTML puzzles with the other HTML’s elements? Which “get key” for dict is to be used here?

I’m trying to create a fullscreen button using an element in another html document.

fullscreen getelementbyId

fullscreen function
- This reply was modified 2 months ago by c4cc.
- This reply was modified 2 months ago by c4cc.
- This reply was modified 2 months ago by c4cc.
- This reply was modified 2 months ago by c4cc.
2025-07-16 at 4:05 pm #83156

bigmike814
Customer

I see you’ve been struggling with this and looking for solutions. Im curious why are you using an iframe anyway? Is it because you have issues with the sizing of the app window? It just seems like a lot of pain to go through when an iframe isn’t necessary in most cases.

2025-07-17 at 2:30 am #83163

c4cc
Customer

I just want to trigger fullscreen for verge3d via html element function, while not ruining the intended variable values. I want to have my verge3d app embedded in webpage like a youtube video:

when triggered it still continues to run as normal while its variable values are updated to match the fullscreen size. And when it goes back to default small screen size, variable values revert to values for that size.

2025-07-17 at 6:34 am #83192

bigmike814
Customer

You can do that either way. It’s just about manipulating the v3d div element. But you can also call functions to an iframe as long as it isn’t a CORS (Cross-Origin Resource Sharing), which I highly doubt you are doing, unless you’re building out a backend as well.
Author

Posts