如何自动刷新iframe angularjs?

时间:2015-09-04 04:46:49

标签: html angularjs iframe

这是代码(使用Angularjs和服务器运行localhost)

的index.html

<iframe src="{{Url}}" width="100%" height="500"></iframe>

app.js

$scope.Url = "http://0.0.0.0:8080/index.html";

需要每30秒刷新一次 怎么可以?

2 个答案:

答案 0 :(得分:2)

我会使用$ timeout功能。设置一个初始值,然后每30秒调用一次重新加载函数并增加一个查询字符串,这样你就不会遇到缓存问题。如果这不是问题,您可以删除$ scope.seed内容。

angular
    .module('app')
    .controller('UrlController', UrlController);

UrlController.$inject = ['$scope', '$timeout'];

function UrlController($scope, $timeout) {

    $scope.loadingCounter = 0;

    $scope.seed = getUtcDate().getTime();
    //adding the counter so the url reload isn't cached.
    $scope.baseUrl = 'http://0.0.0.0:8080/index.html';

    $scope.Url = 'http://0.0.0.0:8080/index.html';

    $scope.getReloadUrl = getReloadUrl;
    $scope.onReload = onReload;

    function onReload() {
        $scope.loadingCounter++;
        $scope.Url = $scope.getReloadUrl();
        //restart it again.
        $timeout($scope.onReload, 30000);
    }

    function getReloadUrl(){
        //create a unique query string
        var reloadId = $scope.seed + $scope.loadingCounter;
        return $scope.baseUrl + '?reloadId=' + reloadId;
    }

    //start it up
    $scope.onReload();

    //helper function 
    function getUtcDate() {
        var now = new Date();
        var nowUtc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
        return nowUtc;
    }

}

答案 1 :(得分:0)

你可以使用Javascript和setInterval刷新Source的源代码...

<script>
window.setInterval("reloadIFrame();", 30000);

function reloadIFrame() {
 document.frames["frameNameHere"].location.reload();
}
</script>