改变网页的尺寸

Question

我有一个如下所示的网页：

http://yoursdproperty.com/index2.php?option=com_jumi&fileid=3&Itemid=11

我希望页面的大小与页面上小表单的尺寸相同。

我可以在此页面代码中修改什么吗？

<div id="mlcalc-w1">
<div id="mlcalc-w2">
<div id="mlcalc-w3">
<div id="mlcalc-w4">
<div id="mlcalc-w5">
<link rel="stylesheet" type="text/css" media="screen,projection" href="http://www.mortgageloan.com/sites/all/themes/mortgageloan/css/tool/mlcalc-inline.css">
<div id="mlcalc-pres">
<h2 id="mlcalc-head">
<em>19 Mortgage Calculators</em> <em><a href="http://www.mortgageloan.com/widgets/#tool-num-4" rel="nofollow" target="_blank">Get this Widget</a><span></span></em>
</h2><iframe id="mlcalc-calc" src="http://www.mortgageloan.com/tool/mortgage/mortgage-calculator-package-content" scrolling="no" border="0" frameborder="0"></iframe>
<p id="mlcalc-footer">
Related Resource: <a href="http://www.mortgageloan.com/">Refinance &amp; Mortgage Rates</a>. Calculator © MortgageLoan.com.
</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以使用 JavaScript 获取要调整大小的元素的计算高度和宽度，并将它们传递给 window.resizeTo 方法。

一个简单的例子：

此代码由 Robert Nyman 提供：

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

现在是我的代码：

window.onload = function() {
    var element = document.getElementById( 'micalc-calc' );
    var width = getStyle( element, 'width' );
    var height = getStyle( element, 'height' );
    window.resizeTo( parseInt( height ), parseInt( width ) );
};

Answer 2

可能值得注意的是，通常认为不要通过 JavaScript 或在创建窗口后以任何方式调整浏览器窗口的大小是一个好主意。主要原因是有人可能在新选项卡中打开了页面，然后您正在调整他们所有页面的大小。而是让打开窗口的链接为其设置大小。