我动态创建iframe以显示通过网址获取的文档。每个文档都在一个iframe中,而iframe又是一个div。我有一个标签栏,允许显示任何文档,同时隐藏其余文件,这是一个典型的标签页。
我想显示包含接收第一个响应的iframe的div,即显示加载的第一个并隐藏其余的响应。没有办法预测哪个会首先加载,所以我需要一种方法来检测第一个并显示它并隐藏所有其余部分。
我想我可以通过让iframe onload函数检查第一个onload处理程序运行时设置为true的全局布尔值来做到这一点。
我不确定为什么,但这感觉很容易出错。有一个更好的方法吗?
var firstDocumentReceived = false ;
function buildFileTabs(evt) {
firstDocumentReceived = false ;
var files = evt.target.files; // files is a list of File objects.
for (var i = 0, f; f = files[i]; i++) {
addTab ( files[i].name );
}
// create a div to display the requested document
function addTab ( fileName ) {
var newDiv = document.createElement("div");
newDiv.id = fileName.replace(".","_") + newRandomNumber() ;
// create an iframe to place in the div
var newIframe = document.createElement("iframe");
newIframe.onload=iframeLoaded ;
newIframe.setAttribute("seamless", true );
newIframe.setAttribute("div_id" , newDiv.id) ;
newIframe.src = url ; // the iframe will contain a web page returned by the FDS server
// nest the iframe in the div element
newDiv.appendChild(newIframe) ;
// nest the div element in the parent div
document.getElementById("documentDisplay").appendChild(newDiv) ;
...
function iframeLoaded ( event ) {
if ( firstDocumentReceived === false ) {
firstDocumentReceived = true ;
// show the div associated with this event
} else {
// hide the div associated with this event
}
答案 0 :(得分:1)
下面,我将介绍两种可供选择的方法(A& B),您可以解决加载的第一个iframe:
A)在加载第一个iframe时停止加载其他iframe。
您需要设置一种方法来跟踪正在添加的新iframe,例如下面显示的newIframes
数组。您可以通过跟踪newIframes
或在iframeLoaded()
函数中运行以下逻辑之前从DOM中检索它们来执行此操作。
下面是一个示例,说明如何通过循环浏览其他iframe来修改iframeLoaded()
功能,停止加载它们并隐藏它们:
function iframeLoaded(evt) {
newIframes.forEach(function (newIframe) {
if (newIframe.getAttribute('div_id') !== evt.target.getAttribute('div_id')) {
// stop loading and hide the other iframes
if (navigator.appName === 'Microsoft Internet Explorer') {
newIframe.document.execCommand('Stop');
} else {
newIframe.stop();
}
newIframe.setAttribute('hidden', 'true'); // you can also delete it or set the css display to none
}
});
}
B)按照joews的建议使用Promise.race()
。
可以使用jQuery创建Promise,但ES6和声包含Promise.race()
对象的Promise
方法。基本上,完成的第一个承诺是在承诺之间的竞赛中解决的。
以下是如何修改代码以使用此ES6功能的示例:
1)创建一个新功能createIframePromise()
,为iframe创建承诺。
function createIframePromise(newIframe) {
var iframePromise = new Promise(function (resolve, reject) {
newIframe.onload = function (evt) {
// when the iframe finish loading,
// resolve with the iframe's identifier.
resolve(evt.target.getAttribute('div_id'));
}
});
return iframePromise;
}
2)在外部范围内创建一个空数组以保存不同的iframe承诺。
// hold the iframe promises.
var iframePromises = [];
3)修改addTab()
功能,方法是创建iframe承诺,然后将其推送到iframePromises
阵列。
请务必从此函数中删除行newIframe.onload=iframeLoaded;
,因为我们已将其移至上面#1中新创建的createIframePromise()
函数。
function addTab(fileName) {
// after "newIframe" with properties is created,
// create its promise and push it to the array.
iframePromises.push(createIframePromise(newIframe));
// ...
}
4)修改buildFileTabs()
功能,以便在创建iframe后设置竞赛,并将其承诺存储在iframePromises
数组中。
function buildFileTabs(evt) {
// ...
Promise.race(iframePromises).then(function (firstIframeId) {
// resolve...
// put logic to show the first loaded iframe here.
// (all other iframe promises lose the race)
}, function () {
// reject...
// nothing b/c "createIframePromise()" doesn't reject anything.
});
}