Strange issue with browser package and iframe

Hello folks

Here i share a problem I have encountered today, as I tried to develop something that I was asked.

First, I will state what I want to accomplish, what I did and what works and what doesn’t.

I was asked to show on a screen 2 webpages, and they have to be alternated in a 40s/20s fashion.
URL 1 40s and followed by URL2 20 sec and so on.
I created a setup using the browser package , Then I created 2 webservers, each one with a URL.
Apart, i created a javascript that runs generating the “resulted” URL in which the 2 URLs are switched.

here is the code

var urls = ["URL1.html", "URL2html"];
var index = 0;

function switchUrl() {
    document.getElementById("iframe").src = urls[index];
    index = (index + 1) % urls.length;

    // Set the interval for the next switch
    var interval = (index == 0) ? 9000 : 3500;
    setTimeout(switchUrl, interval);

// Start with the first URL
document.getElementById("iframe").src = urls[0];

// Set the initial interval
setTimeout(switchUrl, 25000);

The “resulted” URL has this code

<!DOCTYPE html>
    <title>URL Switcher</title>
        function switchURL() {
            var url1 = "URL1.html/";
            var url2 = "URL2.html/";
            var currentURL = document.getElementById("myFrame").src;
            if (currentURL == url1) {
                document.getElementById("myFrame").src = url2;
            } else {
                document.getElementById("myFrame").src = url1;
            setTimeout(switchURL, 6000); // switch every 5 seconds
<body onload="switchURL()">
    <iframe id="myFrame" src="mywebsite/"></iframe>

Now, if I copy&paste the “resulted” URL which points to that webpage, into a local browser on my machine, the browser displays correctly both webpages switching between the two in an endless loop. That is the desired result.
However, when I put the same URL in the browser setup I created earlier and assign that setup to a player, it will display URL1 and a blank webpage for the URL2.

What I tried:
created a diferrent webserver, same result
rebooted the device, nothing
created a new setup from scratch , but same thing happens.
created a different browser for each URL , trying to display just the simple URL, just only one works.
created yet another browser setup where i put different URL, all are working
I am bafled and a bit lost

What I am missing?

First: Why not use the built-in mechanism to switch between pages? Because no 40s option is available as duration? If so, I can add that.

I’m not entirely sure how your first snippet relates to your second snippet. They both seem to implement some form to switching the target url of an iframe. If I understand you correctly, you’re using the code in the second snippet and point to that from the browser setup. So for example you configure and then try to let that switch between and Is that correct?

Is it possible for you to send both urls you actually use to, so I might seen what’s where that’s going wrong?

First , I forgot to state that those pages have to switch during the working hours, so more than 8 hours. Using the built-in mechanism implies that I have to create so many items as dividing 8 h to 40s and 20s.
And the setup is different for each day.

So for example you configure and then try to let that switch between and Is that correct?

Yes, you understood it correctly.

I’m not sure I understand, but if you assign a browser based setup to a device, the list of urls cycles through while the setup is assigned. So you would only need to insert a 20 second url and 40 second url once and the setup would cycle through them repeatedly until the assigned setup changes.

Right now there is no 40 second option, only 45 seconds. Can you try adding both urls as 20s and 45s option to see if that already works and properly cycles through both urls? I can then add the option for 40s as well.

Thanks for the quick response.
Didn’t know that the setup with a time defined tab plays indefinitely. I assume that I have to add the tabs in order to ovelap the time neede for the setup to play.
I understood this corectly?
Now, I realised that first URL will change for each day, the second doesn’t.
I see now that I need a scheduled setup in which I will have to put URL1 as a tab/item for each day and the second URL as the second.
Sorry for making this more complicated, it should be implemented in the webserver which serves the first URL, but we are short in developement area, our dev just left the company.

Sorry, I don’t understand. Let me rephrase: If you create a fullscreen browser based setup, configure two different urls within that setup’s configuration and finally assign that to a device, those two urls will be cycled through constantly.

Correct. That’s probably the easiest way to solve this. Basically create the different setups, each configured to show the two urls. And then use setup scheduling to assign each setup on the correct day.

1 Like

Seems that the fog starts to clear out.

Now, the detail that I missed to include is that one URL displays a static photo and the second a FHD video, and the URL displaying the video on a different browser works perfectly, but doesn’t work under the browser setup.
What am I missing here?

Video rendering within the any fullscreen browser setup will work horribly, if at all, as there is no hardware acceleration in that case. If all you do is show images and videos, I suggest you get rid of the browser completely and upload video/image and then cycle through them using the image/video player.

Here is the kicker:
one URL points to a a Node.js app working in a LXC, which URL shows info about menu and the staff constantly manipulate in real time to show items availability.
Thats the real issue here.

And it baffles me, because the previous setup was a Apache webserver that displayed a webpage with FHD video as background. And it worked!

Please get in contact via email. This is getting too specialized to the forum.

Will do. Thanks for all the responses, helped me to clear some things out.

Just for those who follow the thread:
Solved the problem using yet a simpler solution.
Created a browser setup and the first item scheduled to be shown is athe URL pointing to the Node.js
The second item is another URL pointing to a barebone webserver, with a Bootstrap html webpage and some transition (fake movement) was added to the FHD background.(to overcome the browser lack of hardware accelaration)
After everyone declared that they are happy with that, everything was encapsulated as a LXC container, and deployed in all servers.