同步操作 DOM？

Question

我目前正在开发一个自定义浏览器，它几乎可以运行 带有 Promises 的普通 ES5，并且根本不支持非本机代码。 该浏览器旨在模拟特定硬件的性能，其处理能力不是很好。此外，我的应用程序大小限制非常短。

考虑到这一点以及在同一个窗口中显示不同视图的任务，一次一个，每次使用应用程序时只有一次，我想出了重新加载的想法只有一个 iframe，而不是整个页面。

为此，我编写了以下代码：

function loadFrame(page){
    return new Promise(function(resolve, reject){
        var iframe = document.createElement('iframe');
        iframe.classList.add('hidden');
        iframe.src = page;

        resolve(iframe);
    });
}
function appendTo(elem, parentId){
    return new Promise(function(resolve, reject){
        var parentNode = document.getElementById(parentId);
        parentNode.appendChild(elem);

        resolve(elem);
    });
}
function robOf(elem, id){
    return new Promise(function(resolve, reject){
        var parent = elem.parentNode;
        var doc = elem.contentDocument; // body hasn't loaded so...
        var toImport = doc.getElementById(id); // ... this returns undefined...
        var imported = parent.importNode(toImport, true); //... thus breaking it here
        parent.removeChild(elem);

        resolve(imported);
    });
}

loadFrame('example/myPage.htm')
.then(function(elem){ return appendTo(elem, 'myParentId') })
.then(function(parent){ return robOf(parent, 'myElemId') })
.then(doSomething);

它背后的想法很简单：

• 创建一个 iframe；
• 用本地文件加载它；
• 在 iframe 的文档中查找给定的元素；
• 将该给定元素导入我的页面文档；
• 删除 iframe。

但是，它变砖了。有时iframe 只是没有及时加载，所以当我定义doc 时，它的主体是空的，我在.importNode() 上传递undefined，炸毁了整个东西。认为它应该是一个异步执行问题，我将函数包装在 Promises 中并最终得到了这样的代码，但问题仍然存在。 我想确切地知道我对 Promises 有什么误解，为什么代码不工作以及如何纠正它，最好不使用 setTimeout()。

Answer 1

您可以在<iframe> 上侦听load 事件，以确保iframe 永远不会是undefined。

function loadFrame(page){
    return new Promise(function(resolve, reject){
        var iframe = document.createElement('iframe');
        iframe.addEventListener('load', function(e) {
            resolve(this);
        });
        iframe.classList.add('hidden');
        iframe.src = page;
    });
}

---

此外，在您的函数上调用 .bind 也可能会导致您的某些问题。

改用.then(function(x) { return functionCall(x,p2,p3) });