同步操作DOM？

Question

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

考虑到这一点以及 在同一个 window 中显示不同视图的任务，一次一个，并且每次使用该应用程序时只显示一次，我我想出了只重新加载一个 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) });

同步操作DOM？

Synchronously manipulate DOM?

javascript

dom

promise

ecmascript-5