动态更改iframe高度

Question

我正在尝试扩展我的iframe，其内容随着浏览器窗口大小的变化而动态变化。我有以下代码来缩放高度，但我的问题是我在window.resize()函数之外定义的变量在函数内没有值。我错过了什么吗？它们不应该是全球性的吗？

  var windowHeight = $(window).height();
  var iframeHeight = $('iframe').height();
  var heightScale = windowHeight/iframeHeight;

  //define resize function
$(window).resize( function() {
/*test*/ console.log("I have triggered");

//define dimensions for window and iframe
  var newWindowHeight = $(window).height();
  var newIframeSize = null;
  var hScale = 1.01;
  var sScale = .09;


  //window size getting bigger
  /*test*/ console.log("windowHeight is " + windowHeight);
  /*test*/ console.log("newWindowHeight is " + newWindowHeight);

  if ( windowHeight < newWindowHeight )
    {
      console.log("i'm in the first if")
      windowHeight = newWindowHeight;
      newIframeSize = iframeHeight*heightScale;
      /*test*/ console.log("iframe"+iframeHeight);
      /*test*/ console.log("heightScale"+heightScale);
      /*test*/ console.log("newiframe"+newIframeSize);

      while ( newIframeSize < iframeHeight  )
      {
        console.log("While loop in progress");
        $('iframe').css('transform' , 'scale(' + hScale + ')');
        newIframeSize = $('iframe').height();
      }
    }
    //window size getting smaller
    else if ( windowHeight > newWindowHeight )
      {
        console.log("i'm in the first if")
        windowHeight = newWindowHeight;
        newIframeSize = iframeHeight/heightScale;    
        /*test*/ console.log("hey"+iframeHeight);console.log("hi"+heightScale);console.log("ho"+newIframeSize);

        while ( newIframeSize > iframeHeight ) //can use newIframe < iframeHeight
        {
          console.log("While loop in progress");
          $('iframe').css('transform' , 'scale(' + sScale + ')');
          newIframeSize = $('iframe').height();

        }
      }

感谢帮助。感谢