Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Loop through iframes waiting for ready to complete action

I am loading a series of date based URLs into an iframe to extract data from each page using a script on the top frame (same origin).

What is the best/most efficient way to wait until the iframe is ready (and and action performed) before the date loop beings loading the next item into the iframe? (with or without jQuery)

var start = new Date("01/01/2024");
var end = new Date("01/31/2024");
var loop = new Date(start);

while(loop <= end){
    $("#iframe").attr("src", "data.htm?" + loop);
    $("#iframe").ready(function() {
          // Do something in iframe e.g. $("#iframe").contents().find("#export").click()
    });
    
    var newDate = loop.setDate(loop.getDate() + 1);
    loop = new Date(newDate);

}

The loop doesn’t seem to wait for the iframe to load before proceeding to the next day. I assume the iframe load/ready functions only attach the functions, but do not prevent the loop loading the next page in the iframe.

Tags:

2

Answers


  1. 0

    Use await and a promise to wait for the next while cycle:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

    
    <script type="module">
    var start = new Date("01/01/2024");
    var end = new Date("01/31/2024");
    var loop = new Date(start);


    while(loop <= end){
        $("#iframe").attr("src", "data.htm?" + loop);
        await new Promise(resolve => $("#iframe").ready(function() {
              // Do something in iframe e.g. $("#iframe").contents().find("#export").click()
              resolve();
        }));
        
        var newDate = loop.setDate(loop.getDate() + 1);
        loop = new Date(newDate);

    }
    </script>
    Login or Signup to reply.
  2. 0

    You have to move your code to some asynchronous function to wait for some process to be done

    async function ProcessData(start, end) {
  
  let loop = new Date(start);
  let end = new Date("01/31/2024");
  
    while (loop <= end) {
        const iframeUrl = "data.htm?" + loop.toISOString().split("T")[0];
    $("#iframe").attr("src", iframeUrl);
        const loopProcess = new Promise((resolve, reject) => {
      $("#iframe").on("load", () => {
                try {
                    // Do something in iframe (ensure it doesn't throw errors)
                    $("#iframe").contents().find("#export").click();
                } catch (error) {
                    reject(error); // Reject the promise if an error occurs
                } 
            });
        });
    await loopProcess; // Wait for the promise to resolve before continuing
        loop.setDate(loop.getDate() + 1);
        loop = new Date(loop);
    }
}

    And you can call this function as below:

    var startDate = "01/01/2024";
var endDate = "01/31/2024";

ProcessData(startDate, endDate);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search