我有一个动态数量的 iframe 的页面。window.print() 必须在 iframe 加载时调用(即有 src)。
如何在纯 JavaScript 中优雅地处理这件事而不至于迂腐?
我有一个动态数量的 iframe 的页面。window.print() 必须在 iframe 加载时调用(即有 src)。
如何在纯 JavaScript 中优雅地处理这件事而不至于迂腐?
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
}
你可以做
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
定义。
不太确定这是否是您想要的,但也许它会有所帮助:
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
...