Hi all,
I need to trigger an hype element from an external source (iFrame).
Using document.getElementById("myCheck").click(); doesn't work.
Thanks in advance for your support!
Have you searched to forum, there should be answers to this abound. Look for postMessage iframe
You can also use an solution based on custom behavior. Depends if the target button/rectangle in the parent is also a Hype widget. In that case Hype Global Behavior might be of help… it is also based on postMessage when passing iFrame boundaries and requires the library to be included on each frame/page. There is even an example using pusher.com that runs across multiple computers/devices.
1 Like
Hi,
thanks for the quick reply.
Just to clarify, I have my main container html page built in Hype where I've placed an iFrame (not using the widget).
The iframe contains another html5 file (game), where at certain point I would like to trigger a button located in the Hype page.
I've tried with a simple document getElementByID, adding the hype button ID but it doesn't work. Don't know what is the correct syntax.
The HTML5 game folder is located into the main Hype resources folder.
If postMessage iframe is still the answer, could you please direct me to a specific post?
Thanks again for your time!
The reason your JavaScript doesn’t work is because when using an iFrame you are effectively creating another document which is “inside” the current document tree so the JavaScript cannot find that element inside the “document” as it’s referring to the main doc not the iFrame. Hence Max referring to “postMessage” as a way to communicate between docs.
His extension Hype Global Behavior may be worth looking into however it may be more complicated for you to set up or may be not, who knows 
As Mark suggests though, there are probably quite a few posts on sending info from iFrame to parent document in the forums here.
To give you a more granular explanation would require more info on how you’re firing the action from your external HTML 5 game and how your documents are setup as there is always more than way to achieve a specific goal 
3 Likes
Thanks DBear for the explanation!
I never used Hype Global Behavior, is there any easy example/demo online to see how it works?
I've attached a simplified hype document of the website I am actually building.
As you will see my main container is the hype html document, where you will find a text box used to show the verge3d level and 2 buttons to swap the iframe link.
There are 2 buttons: each one swap from one scene to another (monkey/Polygon).
Everything is working fine when clicking directly the buttons.
I would like anyway to swap automatically the scene after 5 seconds using a javascript from verge3D:
Attached I've uploaded the full zipped project. The webGL output of verge3D (both scenes) are inside the WebGL folder located into the resource folder of Hype.
If you have time to look at it to provide the proper direction to achieve my goal (after seconds trigger the hype ID element to change level) it would be awesome.
trigger.zip (120.8 KB)
Thanks for you time, much appreciated 
You did not actually include your webgl files!.
It seems you are saying you want to have the iframe src changed when you click a button within the iframe itself?.
If that is the case you probably do not need Post message.
You just need to change your perspective.
Since you want the iframes document to act on its self, look at the iframe i as a normal window/document webpage itself and not as an iframe.
With Javascript to change a web page location, your would use
` location.href= "someFoooWebpage.html"`
So that should be all you need to do when you click a button on the iframe's document.
But probably in your case you will need to jump out of the current resource folder and into a sibling one.
Your code would be :
location.href= "../trigger_lvl_2/trigger_lvl_2.html"
Added some files to the WebGL folder
trigger 2.zip (332.4 KB)
2 Likes
Thanks for your time MarkHunte.
Yes your suggestion is a good alternative, but my goal is to let the user:
1- Click on hype buttons to change levels
2- Or, once opened the iframe level, after seconds, automatically click on the hype button to go to the next level.
On the second point, it would be great to trigger the hype button "level 2" located in the main hype html because there are several actions and js nested in it when clicked (eg. sound, hype text change and so on, not included in the example I made).
From Verge3D, as you did in your example, after time I can open a the new level html but the problem is that the proper hype button is not triggered, bypassing a lot of other stuff that need to happen.
trigger_with_WEBGL.zip (3.0 MB)
Please find attached the first example with webGL stuff.
Anyway, using your logic is totally a good alternative thanks. Just thinking if, also using your example, there is the possibility to trigger the level button of the main html file instead of using a new one built in the specific level iframe.
Hmm,
Ok postMessage it is then.
I would suggest using Custom Behaviours to group all the actions and sound plays.
Then have the main window buttons trigger the relevant CB.
The CB names should match each button ID. Then we can use the CB name to get the button and its dataset.
(@jonathan Is the a request already to be able to add the original triggering element to the custom behaviour's event rather than the scene element )
The postMessage from the iframe data will be the same id for the main window buttons.
Note with postMessage I use a '*' as the target for the postMessage.
The suggestion is to be more strict and use your href/domain. So other windows ignore the message and they cannot post to your main window.
The child iframes run a timeline. At the end will trigger the PostMessage function.
Only two levels so it will loop...
Archive.zip (329.5 KB)
1 Like
I didn't see this, so I filed it. Glancing at it, I don't think it would be too hard to do.
2 Likes
Thats great. Thanks
Hi MarkHunte,
Thanks a lot for your time in creating the example, this is totally what I was looking for!
I’ll check later today the example shared, trying to use the same approach in my project.
The solution is working like a charm also executing the postMessage command in Verge.
Thanks a lot for your support, it's really a great community 
3 Likes