Hi guys, I’m trying to do the following:
I have 2 scenes. In scene 1 there are two buttons. In scene 2 there is one html widget.
I would now like to choose the src of the html-widget depending on which of the two buttons hase been clicked. I’ve tried a lot, but can’t do the trick… Can you guys help me? Thank you so much!
First don’t use the HTML widget if not needed and rather just stick in a iFrame into an container giving you more control.
Store a value in hypeDocument when clicking.
Either way you can just give the HTML widget or the preferred iFrame a class and then fetch it on scene load in the next scene. There you fetch the node with querySelector and you set the src attributes using setAttribute based on the value you stored in hypeDocument.
I’ll add a example in a minute.
Here you go:
LoadFrameBasedOnVar.hype.zip (21,1 KB)
Hi,
Just curious… why don’t you use two Html widgets or better two iframes?
If I am correct it is just the same price. You could also use symbols with custom behaviour triggered by your buttons. That could be more flexible with more than two choices.
Have a great day.
That is true. You can do it in pur Hype. I tend to quickly come up with a coding solution. Only thing with two widgets … make sure they don’t render at the same time. If you don’t each site loads and draws resources. Maybe set the iframe code with an animated inner HTML property (record animation and use little pen on rectangle, paste iframe code) OR at least use display to hide the other (not opacity) OR use two scenes each with one HTML widget and symbols for the rest to avoid redundancy.
Hi Max,
Great, that’s absolutely what I was looking for. Thx a lot. 
@Galeace: The reason is exactly the one, Max has already explained. I am trying to load the same Hype-Content in all Scenes of my Hype-document with different “Dashboards”, depending on the user’s choice in Scene 1. Therefore, only one of the Dashboards is relevant to the user, loading all the others would just use unnecessary resources.
Again, thank you vermy much @MaxZieb!
Once again @MaxZieb has the answer!
This works great thank you Max.
Is it possible to make this work within the same scene also?
I’ve attached your file with the desired layout. I’ve been trying for hours to get it to work in my project.
Thanks in advance!!
LoadFrameBasedOnVarSameScene.hype.zip (21.6 KB)
Here is the file you tried with:
LoadFrameBasedOnVarSameScene.hype 2.zip (25,6 KB)
The code used for an button is:
var sceneElm = document.getElementById(hypeDocument.currentSceneId());
var iFrameElm = sceneElm.querySelector('.myFrame');
iFrameElm.setAttribute('src', element.dataset.frameSrc);
given you have an iFrame with the classname myFrame
But there is another file that should also help understand how it works but it's a bit older:
Thank you Max!!
May I buy you a sandwich?
Sure, the bakery is in the about section of my profile 
:: puts the sandwich in the box ::
Here is a version that does something similar for videos:
LoadVideoBasedOnVarSameScene.hype.zip (21,6 KB)
Hi Max,
how to display website title ('src') on iFrame loading bar?
can we control the anchor link on iFrame?
The src is read from the additional attributes and rendered into inner HTML. Just tweak it to your demands by adding additional attributes or editing the HTML portion that is added.
Here is a slightly refactored version that support a data-video-selector and adds the video function to the Hype API. Only interesting for people that need that or find it interessting.
