How to include Javascript from static folder?


I want to use some Javascript within my OH3 pages to change images. How can I include my own .js-file from the html-folder (/static)? I did not find any hint, how to do that.


If you are talking about MainUI or BasicUI, you can’t (I’m not sure about HABPanel). If you have your own .html file in the /static folder than you should be able to import it to your own separate web page in the usual way. You could put that on your Page using a webview widget.

Thank you. I use MainUI (at least I think I do, because I use OH3 with the default homepage and my own pages, which are listed in the menu “Pages”).

How can I use html-files from /static with the MainUI and how can I put them in my pages with webview pages? I don’t understand what this means. I want to be able to use my JS in the MainUI pages and as you say, this can’t be done, so I would like to do this by any workaround.

Use a webframe-card widget. But note that this is only going to run inside that one widget. You can’t change or modify any other parts of the page.

Honestly this sounds like an XY Problem. If you are just looking to rotate through a bunch of pictures, you don’t need a custom HTML and .js file for that. You can use the image widgets and Items.

I already tried webframe, but with no success. When using JS to change the image-src, I can see that replaced url in the console, but in the DOM the url is not changed and the image shows the still image instead ot the stream.

I use f7 popup to show a webcam stream. But when closing the popup the stream still runs in the background the whole time. So I want to replace the stream with an image on closing popup and the other way around. Do you have any idea how to realize this?


If you know any solution how to open an action: popup instead of f7 popup on an item change automatically, I would prefer that. But seems that the only way to open a popup on an item change is f7 popup.

This has already been thoroughly answered on the other thread. The OH actions cannot be triggered from an item event. If it is that important to you to have this feature, then please feel free to go to the webUI github and read about how to make your own contributions. I can think of some interesting uses for a feature like this, so it would probably be welcome (though , non-trivial to implement).

It is not supported and it is definitely not encouraged, but if you are on the newest 3.4 milestone or newer snapshot then this is possible. Read up on the use of html tags in the new docs:

The answer is not given explicitly because…again…not a good idea, but if you understand the concepts demonstrated than everything you need to make that work is there.

I agree with Rich. If you are still trying to solve the issue about the camera streams running in the background, then this is not the way to go. Go back and re-read my suggestions on that thread about using page navigation instead of a popup. You will not have the persistent stream issue that way.

I am looking for a solution to show (and hide) a webcam after someone presses the doorbell. Of course this must be automatically and not by clicking any buttons or changing pages by manual clicking. Is it called “smarthome”, not “clickhome” :wink:

On this way I found the popup thread, which is working fine, except for the never ending stream of the webcam, because the popup is only hidden.

So I tried to make a workaround to stop that streaming, but for this I would have to use JS on the page.

If you have any other solution for showing a popup/page automatically after someone rings the bell (and changing an item status), I am very open to that.

I will check out the new docs as I am running 3.4, thanks.

Got it working to include JS, thanks for the hint. Now I will try to solve the stream issue.

PS: Finally solved the stream issue. Thank you :+1:

If your interested there’s almost certainly a much simpler solution than forcing in your own js. I’ll post an answer in the pop-up thread where the question was first asked.

Yes, great, thanks. But the js-injection nevertheless was a very good hint for other issues. :upside_down_face: