javascript - 检测页面中的所有 iframe 是否都有 src

Question

我有一个动态数量的 iframe 的页面。window.print() 必须在 iframe 加载时调用（即有 src）。

如何在纯 JavaScript 中优雅地处理这件事而不至于迂腐？

Answer 1

function getLoadedFrames () {

    var frames = document.getElementsByTagName( 'iframe' ), // Get all iframes
        loadedFrames = [], i;

    for ( i = 0; i < frames.length; i++ ) {
        /*
            If iframe has a src attribute, that attribute has a value AND
            that value is not equal to the current window location (leaving src
            blank seems to return the current location instead of empty string)
            then add the frame to the loadedFrames array.
        */
        if ( frames[ i ].src && frames[ i ].src.length > 0 && frames[ i ].src !== window.location.href ) {
            loadedFrames.push( frames[ i ] );
        }
    }

    return loadedFrames; // An array of your 'loaded' frames
}

Answer 2

你可以做

function areAllIframesLoaded() {
  var frames = document.getElementsByTagName( 'iframe' )
  return Array.prototype.slice.call(frames).reduce(function(p, c) {
    return p && c.src && c.src.length > 0 && c.src !== window.location.href
  }, true);
}

这将遍历所有 iframe 并返回 true 或 false 以判断它们是否都已src定义。

Answer 3

不太确定这是否是您想要的，但也许它会有所帮助：

window.addEventListener("DOMContentLoaded", function(){
    // Get all iframes as soon as DOM has loaded
    var iframes = document.getElementsByTagName("iframe");
    for (var i = 0, l = iframes.length; i < l; ++i) {
        // Add event handler to every iframe
        iframes[i].onload = function(){
            // Execute window.print() when iframe has loaded
            window.print();
        };
    }
});

这无需检查src属性即可工作，因为如果 aiframe没有 a src，onload则永远不会触发该事件。

请注意，这在 IE 中不起作用；请参阅SO 上的此答案以获得与 jQuery 的等价物$(document).ready...