Question

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

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

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

和iFrame是：

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

有人可以帮助我。如果需要，我可以发布更多代码。

Answer 1

正如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;
}

Answer 2

另一个黑客解决方案：如果你不想创建一个指令，但又想坚持不操纵控制器中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

中建议的黑客解决了这个问题

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

Answer 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;
    }

Answer 5

我在Angular 2中这样做过：

＆＃13;

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

＆＃13;

在AngularJS中刷新iframe内容

5 个答案: