在 AngularJS 中刷新 iframe 内容

Posted 2023-02-22

【中文标题】在 AngularJS 中刷新 iframe 内容

【英文标题】：Refreshing iframe contents in AngularJS

【发布时间】：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>

【参考方案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，并且使用当前值设置值不会导致重新加载