call back after iframe has loaded and edits have been made

Looking to see if better solutions for how to open and iframe , edit some content on initially loaded iframe url , then save it , read some text on the saved page to verify edits were made and saved , then go on to next function which opens a new frame and repeats similar processes.

Here is current mark up , and i'm wondering where i should place my next function that can not be ran until this one is completed. "AdjustImgSettings();" , i currently have it the iframe load function , but seems i have to set timeouts on it to stop new function from triggering before current one is done

function AdjustSettings() {

// APPEND IFRAME

  $('body').append('<iframe src="#" id="iframe" style="display:none"></iframe>');



// AFTER FRAME LOADS START EDITS

  $("#iframe").on("load", function () {

    $('#iframe').contents().find('locate several checkboxes here and click').click();

    setTimeout(function () {$('#iframe').contents().find('input[value="Save Settings"]').click();}, 1000); // EDIT AND SAVE IFRAME CURRENT URL



// AFTER FRAME URL IS SAVED AND RELOADED START MORE EDITS

      $("#iframe").on("load", function () {

        if ($('#iframe').contents().find('h3:contains("Settings")').length > 0) {

          $('div').html('found'); // ADD HTML NOT THAT IFRAME CONTENT FOUND


          $('#iframe').remove(); // REMOVE IFRAME AFTER EDITS

          AdjustImgSettings(); // RUN NEXT FUNCTION MUST WAIT TILL THIS FUNCTION IS COMPLETED

        }
      });
  });

}

from Recent Questions - Stack Overflow https://ift.tt/2WNzcqF
https://ift.tt/eA8V8J