禁用 iframe 的 src 的侦听器答案

【问题标题】：Disable the listener to src of iframe禁用 iframe 的 src 的侦听器
【发布时间】：2017-07-24 16:22:26
【问题描述】：

我的模板中有一个 iframe，src 指的是一个物理 html 文件。

<iframe id="myiframe" src="{{src}}">
</iframe>

在控制器中，不时调用函数rewriteAllFiles来更新物理html, js, css文件。它首先删除所有旧文件，然后写入新文件，然后刷新 iframe。

var refreshIframe = function () {
    var iframe = document.getElementById('myiframe');
    iframe.src = iframe.src;
    console.log("refreshIframe, done")
}

rewriteAllFiles = function (path, files) {
    return $http.post('/emptyDir', { dir: prefix + idP + "/", path: path })
        .then(function (res) {
            console.log("rewriteAllFiles /emptyDir, done");
            return $http.post('/writeFiles', { dir: prefix + idP + "/", files: files })
                .then(function (res) {
                    console.log("rewriteAllFiles /writeFiles, done");
                    refreshIframe();
                    return res
                })
        })
}

$scope.$watch(... {
    return rewriteAllFiles($location.path(), $scope.files);
})

我的测试显示有时它可以正常工作，但有时会给出以下日志：

rewriteAllFiles /emptyDir, done
GET http://localhost:3000/tmp/P0L7JSEOWux3YE1FAAA6/index.html 404 (Not Found)
rewriteAllFiles /writeFiles, done
refreshIframe, done

所以似乎在旧文件被删除之后和新文件写入之前，html模板尝试加载src，导致文件暂时不可用。我没有为src设置监听器，有谁知道src的监听器在哪里，以及如何禁用它？

编辑1：这里是服务器端writeFiles的代码：

router.post('/writeFiles', function (req, res, next) {
    var dir = req.body.dir, files = req.body.files;
    var fs = require('fs');
    var queue = files.map(function (file) {
        return new Promise(function (resolve, reject) {
            fs.writeFile(dir + file.name, file.body, function (err) {
                if (err) return reject(err);
                console.log(dir + file.name + " is written");
                resolve(file);
            })
        })
    });

    Promise.all(queue)
        .then(function(files) {
            console.log("All files have been successfully written");
            res.json(dir);
        })
        .catch(function (err) {
            return console.log(err)
        });
});

【问题讨论】：

应该使用ng-src。听起来发布请求在文件写入之前完成，所以问题出在服务器端
我试过<iframe id="myiframe" ng-src="{{src}}">，但它仍然给出Not Found错误...你能详细说明post request is completing...吗？
我建议您的服务器代码逻辑在文件写入之前发送响应。
我刚刚在服务器端添加了writeFiles的代码...

标签： javascript angularjs asynchronous iframe angularjs-watch

【解决方案1】：

你可以试试 {{::src}}。它只渲染一次。

【讨论】：

我试过<iframe id="myiframe" src="{{::src}}">和<iframe id="myiframe" src={{::src}}>，还是报错。

【解决方案2】：

我意识到它与控制器中的另一行代码有关。

$scope.src = getSrc() // getSrc(); returns the right html link initiated by a resolving 

$scope.$watch(... {
    return rewriteAllFiles($location.path(), $scope.files);
})

当我们加载模板时，上面的代码有可能在删除旧文件之后和写入新文件之前执行$scope.src = getSrc()，从而引发Not Found错误。

所以我们只需要通过then确定执行顺序即可；以下代码有效：

$scope.$watch(... {
    return rewriteAllFiles($location.path(), $scope.files)
        .then(function () {
            $scope.src = getSrcP();
        });
});

【讨论】：