angularjs - 如何在 angularJS 中使用 iframe

Question

我想在加载后更改 iframe 的 scrollTop。这是我的想法。

在模板中

<iframe .. onload="{{loaded()}}" ..></iframe>

在控制器中

$scope.loaded = function() {
    //chage scroll of iframe
}

但我认为这不是角度风格（“不要进行任何类型的 DOM 操作”）

这样做的最佳做法是什么？

Answer 1

这是我的代码。但是跨域不起作用..

directive('myIframe', function(){
    var linkFn = function(scope, element, attrs) {
        element.find('iframe').bind('load', function (event) {
          event.target.contentWindow.scrollTo(0,400);
        });
    };
    return {
      restrict: 'EA',
      scope: {
        src:'@src',
        height: '@height',
        width: '@width',
        scrolling: '@scrolling'
      },
      template: '<iframe class="frame" height="{{height}}" width="{{width}}" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="{{scrolling}}" src="{{src}}"></iframe>',
      link : linkFn
    };
  });

Answer 2

This is a workaround to avoid cross domain problems:

  directive('myIframe', function(){
    var linkFn = function(scope, element, attrs) {
        element.find('iframe').bind('load', function (event) {
          event.target.contentWindow.scrollTo(0,400);
        });
    };
    return {
      restrict: 'EA',
      scope: {
        src:'&src',
        height: '@height',
        width: '@width',
        scrolling: '@scrolling'
      },
      template: '<iframe class="frame" height="{{height}}" width="{{width}}" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="{{scrolling}}" src="{{src()}}"></iframe>',
      link : linkFn
    };
  });

in controller ($sce injected):

$scope.getSrc = function() {
  return $sce.trustAsResourceUrl("http://example.com");
};

and in .html:

<my-iframe src='getSrc()'>

Answer 3

像这样的东西应该可以工作，只要my-frame='loaded()'在你的 iframe 标签中有它就可以了。它未经测试，我假设加载框架后调用加载函数。如果它不起作用，也许ready会起作用。

.directive('myFrame',function(){
    return {
        link:function(scope,ele,attrs){
            ele.load(function(){
                scope.$apply(attrs.myFrame);
            });
        }
    };
});