Changing HTML Widget Content via button action?

Hi All,

Is it possible to change the url content displayed in an html widget via a button action? I have a very simple interface with an html widget and three buttons. I would like to load different URLs into the html widget via each of the three buttons.

Also, I can’t seem to get any url content to display in the html widget even when adding it element inspector within the “Specified URL” field. I am a very new user and do not have much experience with Hype or javascript.

Any advice is greatly appreciated!

Hi John @jpatten

Yes. But you will have to get your hands a little dirty with Javascript.

This would be the code to use “On Mouse Click” on one of your buttons:

var iframe = hypeDocument.getElementById('myIframe').children[0]; // myIframe an example ID of the HTML widget. This would be your own. Set in the Element inspector.
// children[0] is the actual iframe as HTML Widgets in Hype are actually Divs with an iframe in it.
    iframe.src = "NEW URL HERE";

Be careful as certain urls won’t display because of cross origin. To make sure there is nothing else that is causing this you will need to share your Hype document so that we can see better what you are trying to do. :wink:

Thanks DBear!

I’m closer. I knew it would have been something simple. However, when I preview in Firefox or Chrome on the desktop it works fine. When I try to preview on my iPhone, none of the buttons appear to work.

Also, just for clarification, when I create additional layouts for landscape and smaller size mobile display, do I have to create new javascript docs for each, and also create a new unique element name for the html widget in the new layouts?

I believe I do, but I wanted to make sure.

Thank you!

Yes you do. There are ways to streamline it using built in API but I feel that’s probably out of your depth at the moment :slight_smile: no offence. So, create functions with names like desktopUpdateIFrame or dUpdateIframe and mUpdateIframe, etc — entirely up to you. This is so you can keep track of which is which. :slight_smile:

Give your elements unique ID’s following the same procedure (m-button1, d-button1, etc)

Thanks DeBear!

Any idea why the buttons and “on mouse click” doesn’t work on an iPhone? It works fine on the desktop.

I have attached a sample project (934.4 KB)

Just an example.

I’ve cut it down for simplicity. (42.8 KB)


Your example works fine in on the desktop. However, when I send it to my iPhone and Hype Reflect, the button action does not work.

This is on an iPhone 6+ iOS 9.3.2

I’m thinking there must be a bug on this platform.