如何設置iframe內容的高度和寬度？

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和scrollHeight是只讀屬性 。

另外請記住，除非您實際上是Yahoo的工程師，否則如果嘗試iframe yahoo.com將會遇到跨源問題。

我建議您閱讀這篇很棒的問答，我敢打賭，它會給您帶來更好的理解，甚至您甚至可以避免在您的網站中遇到iframe問題。 另一個跨域iframe調整大小問答

但是，如果不提供示例，這不是一個正確的答案。 您可以使用javascript輕松設置iframe的寬度和高度，盡管更喜歡CSS語法以保持代碼干凈。

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/