Updating embedded HTML within Iframes

Question

Updating embedded HTML within Iframes

Looking for a script that can dynamically change the src attribute of iframes at different intervals. The time between each change varies depending on the specific iframe.

For example: Page Loads Google.com is loaded. 15 seconds later Yahoo.com is loaded. 37 seconds later Ask.com is loaded. 12 seconds later Dogpile.com is loaded. and so on...

This is what I've attempted:

<html>

<head>
    <meta charset="utf-8" />
    <title>Monitor Presidency</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>

<body>
    <div style="width: 100%; display: flex;">
        <div class="ui teal progress" data-percent="0" id="example1" style="width: 90%;margin-bottom: 0px">
            <div class="bar"></div>
        </div>

        <div class="ui icon buttons" style="width: 10%">
            <button class="ui button" style="width: 25%" onclick="subtract_one()">
                <i class="left chevron icon"></i>
            </button>
            <button class="ui button " style="width: 25%" onclick="start()">
                <i class="play icon"></i>
            </button>

            <button class="ui button" style="width: 25%" onclick="pause_application()">
                <i class="pause icon"></i>
            </button>

            <button class="ui button" style="width: 25%" onclick="add_one()">
                <i class="right chevron icon"></i>
            </button>
        </div>
    </div>


    <iframe id="container" class="frame_monitor" style="width: 100%;height: 100%;" src="www.google.com"></iframe>
    <iframe id="shipping_hl" class="frame_monitor" style="width: 100%;height: 100%;display: none;" src="www.yahoo.com"></iframe>
    <iframe id="shipping_hl_accumulated" class="frame_monitor" style="width: 100%;height: 100%;display: none;" src="www.terra.com"></iframe>



</body>
<script>
    var monitor_array = ["container", "shipping_hl", "shipping_hl_accumulated"];
    var current_monitor = 0;
    var progress = 0;
    var myVar;

    var setIntervalUpdateFrame;


    function add_one() {

        /*  if (current_monitor === 2) {
              current_monitor = 0;
          } else {
              current_monitor++;
          }

          $('.frame_monitor').css('display', 'none');
          document.getElementById(monitor_array[current_monitor]).style.display = "";*/

        progress = 100;
        stopFunction();
        start();
        /*  if (current_monitor === 2) {
              current_monitor = 0;
          } else {
              current_monitor++;
          }*/

    };

    function subtract_one() {
        //progresso = 100;

        if (current_monitor === 0) {
            current_monitor = 2;
        } else {
            current_monitor--;
        }

        $('.frame_monitor').css('display', 'none');
        document.getElementById(monitor_array[current_monitor]).style.display = "";
        progress = 0;
        stopFunction();
        start();


    };

    function start() {
        clearInterval(setIntervalUpdateFrame);

        stopFunction();
        myVar = setInterval(function () {
            if (progress === 100) {
                progress = 0;

                if (current_monitor === 2) {
                    location.reload();
                    //num_monitor = 0;
                } else {
                    current_monitor++;
                }
                $('.frame_monitor').css('display', 'none')
                document.getElementById(monitor_array[current_monitor]).style.display = "";
            };



            progress++;
            progress++;
            $('#example1').data('percent', progress);
            $('#example1').progress();
        }, 3800);
    }

    function stopFunction() {
        clearInterval(myVar);
        //atualiza_frame();
    }
    start();

    function pause_application(){
        clearInterval(myVar);
        update_frame();
    }

    function update_frame() {
        clearInterval(setIntervalUpdateFrame);
        setIntervalUpdateFrame = setInterval(function () {
            document.getElementById(monitor_array[current_monitor]).src=document.getElementById(monitor_array[current_monitor]).src;
        },1);
    }
</script>

</html>

javascript html css iframe

Answer 1

Answer №1

The usage of setInterval and setTimeout in your code is not handled correctly, resulting in the creation of a timer id for scheduling executions. https://www.telerik.com/blogs/how-do-i-pause-execution-in-javascript
A more efficient approach would be to utilize the Promises async library, as demonstrated below. 1

Regarding websites that prevent framing through response headers, a workaround involves using a back-end program where the server loads and forwards web files. 2

<!DOCTYPE html>
<html>
  <head>
    <title> Hello </title>
    <style>
        iframe {
            display: block;
            width: 1000px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
          }

          iframe:focus {
            outline: none;
          }

          button {
            display: block;
            margin: auto auto;
          }

          label {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          input {
            display: block;
            margin: auto auto;
          }
    </style>
  </head>
  <body>
    <div id='main'>
      <button id='wait' onclick='wait()'>Wait</button>
      <label>Seconds</label>
      <input type='number' id='seconds' placeholder='milliseconds'>
      <button id='switching' onclick='webSwitch()'>Switch sites</button>
      <iframe id='switchMe' src='https://codepen.io'></iframe>
    </div>
    <script>
      //Array of webpages
     var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
     //For tracking position in array
     var count = 0;

     //Function to be ran by event
     function webSwitch() {
        console.log('I have been called');
       if (count >= webList.length) {
         count = 0;
       }
       //Setting new URL
       document.getElementById('switchMe').src = webList[count];
       //Make sure to use next URL
       count++;
     }

     function wait() {
        console.log('Click!');
        var numMS = document.getElementById('seconds').value;
        sleep(numMS).then(() => {
            webSwitch();
        })
     }

     function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
     }
    </script>
  </body>
</html>

Answer 2

The usage of setInterval and setTimeout in your code is not handled correctly, resulting in the creation of a timer id for scheduling executions. https://www.telerik.com/blogs/how-do-i-pause-execution-in-javascript
A more efficient approach would be to utilize the Promises async library, as demonstrated below. 1

Regarding websites that prevent framing through response headers, a workaround involves using a back-end program where the server loads and forwards web files. 2

<!DOCTYPE html>
<html>
  <head>
    <title> Hello </title>
    <style>
        iframe {
            display: block;
            width: 1000px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
          }

          iframe:focus {
            outline: none;
          }

          button {
            display: block;
            margin: auto auto;
          }

          label {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }

          input {
            display: block;
            margin: auto auto;
          }
    </style>
  </head>
  <body>
    <div id='main'>
      <button id='wait' onclick='wait()'>Wait</button>
      <label>Seconds</label>
      <input type='number' id='seconds' placeholder='milliseconds'>
      <button id='switching' onclick='webSwitch()'>Switch sites</button>
      <iframe id='switchMe' src='https://codepen.io'></iframe>
    </div>
    <script>
      //Array of webpages
     var webList = ["https://www.bing.com", "https://www.walmart.com","https://www.codepen.io"];
     //For tracking position in array
     var count = 0;

     //Function to be ran by event
     function webSwitch() {
        console.log('I have been called');
       if (count >= webList.length) {
         count = 0;
       }
       //Setting new URL
       document.getElementById('switchMe').src = webList[count];
       //Make sure to use next URL
       count++;
     }

     function wait() {
        console.log('Click!');
        var numMS = document.getElementById('seconds').value;
        sleep(numMS).then(() => {
            webSwitch();
        })
     }

     function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
     }
    </script>
  </body>
</html>

Updating embedded HTML within Iframes

Answer №1

Similar questions

Accessing a Child Component Function in Material UI

Retrieve JSON Data Using Angular in a Wordpress Environment

Tips for customizing the blinking cursor in a textarea

Calculate the previous date excluding Sundays by subtracting the specified number of days from the given date

Extracting information from Javascript on an HTML webpage

CSS-loader imported styles failing to function properly

Here's a unique rewrite of the text: "What is the best way to run a JavaScript script in Java and

What is the reason for the presence of "CTYPE" in my HTML upon refreshing the page?

What is the solution for resolving the "cannot resolve" issue in CSS for an Angular project?

Is there a way to include multiple div elements on a single page using React?

Embed an HTML file within another HTML file

Adding additional text will not render d3.js' output

Edge browser: Disable Ctrl + left click functionality

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Having trouble with the rowNode functionality in PrimeNG TreeTable

What is the best way to ensure that the execution of "it" in mocha is paused until the internal promise of "it" is successfully resolved?

Issue encountered when attempting to alter the action attribute of a form: receiving an error message stating 'undefined is not a function'

Oops! Smarty encountered a fatal error that wasn't caught

What is a more efficient approach to managing the response from an asynchronous call other than using setState?

Enhancing web pages with a touch of JSP glow