Question

我正在尝试通过角度

设置iframe内容高度

我有类似

的东西

app.controller('testCtr' ['$scope', '$window' ), function() {
   var newWin = $window.open();
   newWin.document.write("<iframe id='iframe' width='100%' height='100%' 
   src='http://www.yahoo.com'></iframe>");

   var iframe = newWin.document.getElementById('iframe');
   iframe.addEventListener('load', function() {                    

       //after iframe is loaded, I want to set the hight of the contents here
       var t =  iframe.contentWindow.document.body.offsetWidth;              

       //console.log(t)  -> return undefined.   

       iframe.contentDocument.body.scrollWidth = '500px';
       iframe.contentDocument.body.scrollHeight = '500px';
   })
}])

我如何做到这一点？

Answer 1

您遇到的问题是scrollWidth and scrollHeight are read-only properties。

另外请记住，如果你试图使用iframe yahoo.com，你将遇到跨域问题，除非你真的是雅虎的工程师。

我建议你阅读这个很棒的Q＆amp; A，我敢打赌它会让你更好地理解，也许你甚至可以避免在你的网站上遇到iframe问题。 Yet Another cross-domain iframe resize Q&A

但是，如果我不包含一个例子，那么这不是一个正确的答案。您可以使用javascript轻松设置iframe宽度和高度，但CSS clases更喜欢保持代码清洁。

var app = angular.module('testApp', []);

app.controller('testCtrl', ['$scope', function($scope) {

    $scope.resizeMe = function() {
        var r = Math.round(Math.random() * 100) + 200;

        // For reference, this is how you get the original size:
        // $("#myIframe").height($("#myIframe").contents().find("html").height());

        $("#myIframe").width(r);
        $("#myIframe").height(r);
    };
}]);


<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <button ng-click="resizeMe()">Resize!</button>
        <br>
        <iframe id="myIframe" src="http://example.com"></iframe>
    </div>
</div>

这是演示：http://jsfiddle.net/6edeaLe1/

如何设置iframe内容的高度和宽度？

1 个答案: