Question

I am creating a simple script where a form is submitted, and the result of form submission is redirected to an iframe.

I want js code to check if the iframe has finished loading the form submission result completely, and only then retrieve the content of that iframe and post it to me in a form post.

I have the code to retrieve the content of iframe, as well as code to send form post, I just need a way to determine if the new page loaded into the iframe, has finished loading or not. I would like to wait for the loading to be complete, and only then retrieve content of that iframe and post it.

Also I would like a simple javascript function to submit all forms in the web page in main window of web browser.

Answer 1

You can use an event listener for when the document is ready in Chrome and FF, but IE doesn’t support that. Instead, IE has something called readystate that you can handle the change event of. Below are the functions that should handle everything you need to add the event handler. You’ll want to call addLoadHandler, the rest are supporting functions.

// Adds an onload handler for script and iframe elements (supports IE)
var _addLoadHandlerCallbackFired = {};
function addLoadHandler(element, callback) {
    if (typeof callback !== 'function') { return false; }

    var callbackID = generateNumericID();   // Generate an ID for the callback
    _addLoadHandlerCallbackFired[callbackID] = false;   // Initialize its state as not fired
    callback = queueCallback(callback, 'addLoadHandler:' + callbackID); // Support multiple callbacks on the same element
    var wrappedCallback = function() {  // Wrap callback to set state to fired when called
            _addLoadHandlerCallbackFired[callbackID] = true;
            return callback.call(element);
    };

    // Attach standard load handler
    addEventHandler(element, 'load', wrappedCallback);

    /* Hack to replicate element.onload in IE
    Adapted from Nick Spacek's code at https://gist.github.com/461797 */
    addEventHandler(element, 'readystatechange', function() {
            if ((element.readyState === 'loaded' || element.readyState === 'complete') && _addLoadHandlerCallbackFired[callbackID] === false) {
                return wrappedCallback.call(element);
            }
        });

    return true;
}

// Generates Locally Unique IDs (length parameter is optional)
function generateNumericID(length) {
    if (typeof length !== 'undefined' && typeof length !== 'number') { return false; }

    if (typeof length === 'undefined') {
        length = 20;    // Maximum length before the browser uses scientific notation
    }
    return Math.floor(Math.random() * Math.pow(10, length));
}

// Queues callback functions to be executed in FIFO order
var _callbacksQueues = {};
function queueCallback(callback, id) {
    if (typeof id === 'undefined') { id = callback; }

    if (typeof _callbacksQueues[id] === 'undefined') { _callbacksQueues[id] = []; }
    _callbacksQueues[id].push(callback);

    return function() {
        while (_callbacksQueues[id].length > 0) {
            _callbacksQueues[id].shift().apply(this, arguments);
        }
    };
}

// Attaches events with cross-browser support, properly setting the context of this
function addEventHandler(element, event, handler, capture) {
    if (!isDOMElement(element) || typeof event !== 'string' || typeof handler !== 'function') { return false; }
    if (event.substr(0,2) === 'on') { event = event.substr(2); }    // Strip the 'on' at the beginning of the event if it is present

    if (typeof element.addEventListener === 'function') {   // Primary way of adding event listeners
        if (typeof capture === 'undefined') { capture = false; }
        return element.addEventListener(event, handler, capture);
    } else if (typeof element.attachEvent !== 'undefined') {    // Special case for IE (also, strangely typeof element.attachEvent = 'object' in IE)
        return element.attachEvent('on' + event, function(e) { return handler.call(element, e); });
    } else {
        return false;
    }
}

// Adapted from isPlainObject in jQuery 1.5.2
function isDOMElement(object) {
    return object && (typeEx(object) === 'object') && (object.nodeType || isWindow(object));
};

/* Like typeof, but can tell different types of built-in objects apart
Adapted from jQuery 1.5.2 */
function typeEx(object) {
    var parameterType = typeof object;
    if (parameterType !== 'object') {
        return parameterType;
    } else {
        if (object instanceof Date) {
            return 'date';
        } else if (object instanceof Array) {
            return 'array';
        } else if (object instanceof RegExp) {
            return 'regexp';
        } else {
            return 'object';
        }
    }
}

/* A crude way of determining if an object is a window
Taken from jQuery 1.5.2 */
function isWindow(object) {
    return object && typeof object === "object" && "setInterval" in object;
}

As for submitting all forms on the page. You just need to call .submit on each. The below code will do that:

var forms = document.getElementsByTagName('form');
for (var formIndex = 0; formIndex < forms.length; formIndex++) {
    forms[formIndex].submit();
}