angularjs - 在 AngularJS 中刷新 iframe 内容

Question

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

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

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

iFrame 是：

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

Answer 1

正如 Paulo Scardine 所说，正确的方法是通过指令，因为您不应该使用控制器来操作 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;
}

Answer 2

另一个 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。

Answer 3

通过Reload an iframe with jQuery中建议的 hack 解决了这个问题

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

Answer 4

我在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;
    }

Answer 5

如果要刷新页面中的所有 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;
    }