javascript - resize:最初の対話の前に JS でサイズを変更すると、両方の動作が異なります

Question

CSSで使用resize:both;して、Iframe のサイズを変更します。プログラムで Iframe のサイズを変更するときに 1 つの問題があります。

iframe が手動でサイズ変更された場合(つまり、手動ドラッグ)、プログラムで (JS を使用して) サイズ変更された場合、Iframe は本来の動作をしており、任意のサイズにサイズ変更できます。

ただし、iframeが手動でサイズ変更されず(つまり、手動ドラッグ)、プログラムによって (JS を使用して) より大きなサイズにサイズ変更された場合、この新しいサイズは Iframe が持つことができる最小サイズになり、Iframe はサイズが大きくなるだけです。

<div>
        <input type="button" value="Maxmize" onclick="ButtonClick()"></input>
        <input type="button" value="Remove"></input>
        <div>
            <iframe id="theId" class="Resizer" src="">
            </iframe>
        </div>
               </div>

           <style type="text/css">
           .Resizer {resize: both;}
           </style>
           <script>
           function ButtonClick() {
                var iFrame = document.getElementById("theId");
                var iFrameStyleAttr = document.createAttribute('style');
                iFrameStyleAttr.nodeValue = 'width:400px;height:300px;';
                iFrame.setAttributeNode(iFrameStyleAttr);
            }
           </script>

どちらの場合でも、Iframe のサイズを縮小する機能を実現するにはどうすればよいですか?

編集:JQueryや同様のライブラリを使用しないソリューションが必要です。

編集 2: Google Chrome 28.0 で動作するソリューションが必要です