Question

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

模板中的

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

控制器中的

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

但我认为这不是角度风格（“不要任何形式的DOM操作”）

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

Answer 1

这是mycode。但是跨域不起作用..

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

这是避免跨域问题的解决方法：

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

控制器中的

（$ sce注入）：

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

和.html：

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

Answer 3

这样的事情应该有用，只需在iframe代码中添加my-frame='loaded()'即可。它是未经测试的，我假设在加载帧后调用load函数。如果它不起作用，也许ready可行。

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

如何在angularJS中使用iframe

3 个答案: