在 AngularJS 中刷新 iframe 内容答案

【问题标题】：Refreshing iframe contents in AngularJS在 AngularJS 中刷新 iframe 内容
【发布时间】：2013-09-14 03:10:12
【问题描述】：

我正在编写一个部分 Angular 和部分 jQuery 的应用程序。我通过在 iFrame 中加载 jQuery 内容来分离它们。

在某个事件发生时（例如，在单击 ng 时），我需要刷新 iFrame。我的控制器包含以下代码：

$scope.refreshIframe = function() { //refresh the iFrame with id "anIframe" };

而 iFrame 是：

<iframe id="anIframe" src="myUrl"></iframe>

【问题讨论】：

标签： angularjs iframe refresh

【解决方案1】：

通过Reload an iframe with jQuery 中建议的 hack 解决了它

$scope.refreshIframe = function() { 
    var iFrame = $document.find("anIframe");
    iFrame.attr("src",iFrame.attr("src"));
};

【讨论】：

在没有$document的情况下，有什么方法可以通过ng-model做到这一点？
我想正确的做法是使用指令。

【解决方案2】：

我在 Angular 2 中是这样做的：

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
    selector: 'myHTMLContainer',
    template: `<iframe #ifr ></iframe>`
    })

export class HTMLContainerComponent implements OnInit {
    @ViewChild('ifr') ifr: ElementRef;
    
    //call setURL function whenever you want to change the iframe's src
    setURL(url:string) {
        this.ifr.nativeElement["src"] = url;
    }

【讨论】：

【解决方案3】：

另一个 hack-ish 解决方案：如果您不想创建指令，但想坚持在控制器中不操作 DOM 的良好做法。将 url 保存在一个数组中并使用 ng-repeat 来呈现 iFrame：查看：

<iframe ng-repeat="url in vm.url" ng-src="{{url}}" />

控制器：

vm.url = ['http://google.com'];

因此，每次设置 vm.url 的值时，angular 都会重新渲染 iFrame。

【讨论】：

好把戏的人！谢谢你

【解决方案4】：

如果您想刷新页面中的所有 iframe：

    var refreshAllIframes = function(){
      var iFrames = $document.find('iframe');
      for(var i = 0; i < iFrames.length; i++){
        refreshFrame(i,iFrames);
      }
    }

    var refreshFrame = function(i,iFrames){
      iFrames[i].src = iFrames[i].src;
    }

【讨论】：

【解决方案5】：

正如 Paulo Scardine 所说，正确的做法是通过指令原因 you shouldn't use controllers to manipulate DOM。

这样的事情可以做：

.directive('refreshable', [function () {
    return {
        restrict: 'A',
        scope: {
            refresh: "=refreshable"
        },
        link: function (scope, element, attr) {
            var refreshMe = function () {
                element.attr('src', element.attr('src'));
            };

            scope.$watch('refresh', function (newVal, oldVal) {
                if (scope.refresh) {
                    scope.refresh = false;
                    refreshMe();
                }
            });
        }
    };
}])

然后可以像这样使用：

<iframe refreshable="tab.refresh"></iframe>

还有：

$scope.refreshIframe = function(){
    $scope.tab.refresh = true;
}

【讨论】：

当我尝试这个时，我得到一个错误，指出“TypeError: Cannot set property 'refresh' of undefined” 你需要以特殊方式定义“tab”吗？
不，只需在控制器初始化时使用$scope.tab = {};。您还可以使用另一个变量，例如 $scope.whateveryouwant。
谢谢弗洛里安。变量初始化确实丢失了！
当 iframe 的 src 使用 ng-src 动态加载时，这不起作用。我相信角度只会在值发生变化时重新加载 iframe，并且使用当前值设置值不会导致重新加载