Question

我正在创建一个提交表单的简单脚本，表单提交的结果会重定向到iframe。

我希望js代码检查iframe是否已完全加载表单提交结果，然后只检索该iframe的内容并将其发布到表单帖子中。

我有代码来检索iframe的内容，以及发送表单的代码，我只需要一种方法来确定加载到iframe中的新页面是否已经完成加载。我想等待加载完成，然后只检索那个iframe的内容并发布。

另外我想要一个简单的javascript函数在Web浏览器的主窗口中提交网页中的所有表单。

Answer 1

您可以在Chrome和FF中准备文档时使用事件侦听器，但IE不支持该事件。相反，IE有一个称为readystate的东西，你可以处理更改事件。以下是应该处理添加事件处理程序所需的所有功能。你需要调用addLoadHandler，其余的是支持函数。

// 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;
}

至于在页面上提交所有表格。你只需要在每个上面调用.submit。以下代码将执行此操作：

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

简单的js-在页面中提交所有表单+检查iframe中的页面是否已完成加载

1 个答案: