我通过角度想安装的iframe内容高度
I am trying to setup the iframe content height through angular
我有这样的事情
<iframe id='iframe' width='100%' height='600px' data-ng-init="init('iframe')"
src='http://test.com' />
在我的控制器
$scope.init = function(id) {
console.log($('#'+ id)) -> show my iframe
var x= $('#'+ id)..contentWindow.document.body.scrollHeight;
console.log(x) -> gives me undefined
var y = $('#'+ id)..contentWindow;
console.log(y) -> give me undefined too
}
我将通过我的控制器中的iframe中的内容高度怎么办?
How do I set the iframe content height through my controller?
谢谢!
从code一些意见:
NG-INIT
不是 $(窗口)。在(加载功能(){的equivalient .. })
,约 NG-init的详细信息
此处的 https://docs.angularjs.org/api/ng/directive/ngInit 。这就是为什么你得到未定义
为 X
和是
,因为被执行code当iframe中还没有被加载。
ng-init
is not the equivalient of $(window).on("load", function(){...})
, more information about ng-init
here: https://docs.angularjs.org/api/ng/directive/ngInit . That's why you are getting undefined
for x
and y
, because when that code is executed the iframe hasn't been loaded yet.
在角度不是从控制器访问DOM是个好主意,可考虑做这些的排序操作的指令来代替。
In angular is not a good idea to access the DOM from the controller, consider doing those sort of operations in a directive instead.
如果您从开始angularjs我会建议你尽量不要使用jQuery。
If you are starting with angularjs I would recommend you to try not to use jQuery.
在你的情况我认为,你想要的是这样定义 iframeSetDimentionsOnload
指令,并设置高度那里。我会给你比如在几分钟的时间。
In your case I think that what you want is to define a directive like iframeSetDimentionsOnload
and set the height there. I will give you in example in a few minutes.
您 iframeSetDimensionsOnload
指令:
yourApp.directive('iframeSetDimensionsOnload', [function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.on('load', function(){
/* Set the dimensions here,
I think that you were trying to do something like this: */
var iFrameHeight = element[0].contentWindow.document.body.scrollHeight + 'px';
var iFrameWidth = '100%';
element.css('width', iFrameWidth);
element.css('height', iFrameHeight);
})
}
}}])
使用这样的:
<iframe iframe-set-dimensions-onload src='http://test.com' />