javascript - 我有多个 iframe，如何检测第一个加载的

Question

我正在动态创建 iframe 以显示通过 url 获取的文档。每个文档都在一个 iframe 中，而 iframe 又在一个 div 中。我有一个标签栏，允许显示任何文档，同时隐藏其余文档，这是一个典型的标签页。

我想显示包含接收第一个响应的 iframe 的 div，即显示第一个加载并隐藏其余部分。无法预测哪个将首先加载，因此我需要一种方法来检测第一个并显示它并隐藏所有其余部分。

我想我可以通过让 iframe onload 函数检查在第一个 onload 处理程序运行时设置为 true 的全局 bool 值来做到这一点。

我不确定为什么，但这感觉很容易出错。有一个更好的方法吗？

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
    }

Answer 1

下面，我描述了两种替代方法(A 和 B)，您可以解析第一个加载的 iframe:

A) 在加载第一个 iframe 时停止加载其他 iframe。

您需要设置一种方法来跟踪正在添加的新 iframe，例如 newIframes数组如下所示。您可以通过跟踪 newIframes 来做到这一点或者在你的 iframeLoaded() 中运行以下逻辑之前从 DOM 中检索它们功能。

下面是一个关于如何修改 iframeLoaded() 的示例通过循环遍历其他 iframe、停止加载它们并隐藏它们来发挥作用:

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) 使用 Promise.race()正如 joews 所建议的那样。

Promise 可以使用 jQuery 创建，但 ES6 harmony 包含一个 Promise.race() Promise 的方法目的。基本上，第一个要完成的 promise 是在 promise 之间的竞赛中解决的。

下面是一个示例，说明如何修改代码以使用此 ES6 功能:

1) 创建一个新函数 createIframePromise()为 iframe 创建 promise 。

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 promise 。

// hold the iframe promises.
var iframePromises = []; 

3) 修改您的 addTab()通过创建一个 iframe promise 然后将其推送到 iframePromises 来实现功能数组。

确保同时删除行 newIframe.onload=iframeLoaded;从这个函数，因为我们把它移到了新创建的createIframePromise()上面 #1 中的函数。

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 并将它们的 promise 存储在 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.
    });
}