jquery - 如何动态更改带有单选框的 iframe 的大小？

Question

我希望用户使用单选复选框切换 iframe 的大小，我该怎么做？

我尝试了类似的东西对于radiocheckboxes我做了这样的事情：

<input id="othersize1" type="radio" name="size"reSize(60,400) onclick="" checked="checked" /><label for="othersize1">60x400</label>
<input id="othersize2" type="radio" name="size" onclick="reSize(1280,400)" /><label for="othersize2">1280x400</label>

内嵌框架：

<iframe src="myphphere.php">Your browser don't supports iframes.</iframe>

Answer 1

您可以使用jQuery.

这是我刚刚制作的一个基本示例：

HTML：

<iframe id="iframe1" src="http://meatballcandy.com/wp-content/uploads/2012/09/nicholas-cage-as-et.png">
    <p>Not Supported</p>
</iframe>

<div>
    <input id="item1" type="radio" name="size" value="100" checked="checked" /><label for="item1">100x100</label>
    <input id="item2" type="radio" name="size" value="200" /><label for="item2">200x200</label>
    <input id="item3" type="radio" name="size" value="300" /><label for="item3">300x300</label>
</div>

JAVASCRIPT：

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        $('#iframe1').css({
            'height': $(this).val() + 'px',  
            'width': $(this).val() + 'px'
        });
    });
});

演示：http: //jsfiddle.net/dirtyd77/fYP2Z/1/