用户操作的框架 - HTML/CSS/JS

Question

如何使下面的框架在加载后允许用户拖动和缩放大小？这可能与 HTML/CSS/JS 吗？

<script>
    var frame;
    function addFrame() {
       frame = document.createElement('iframe');
       frame.height = "200px";
       frame.width = "200px";
       frame.setAttribute('id', 'superFrame');
       document.body.appendChild(frame);
    }
    function loadGoogle() {
       frame.setAttribute('src','http://www.google.com')
    }
</script>

左边是我拥有的，右边是我想要的，但用户通过拖动框架来设置大小。

Image

Answer 1

srcResponsive IFrames — The Right Way!

1. 移除宽度和高度属性
2. 为 iframe 设置父 div

3. 使包含的 div 具有响应性，并且 iframe 具有以下大小/定位规则：

   iframe { 位置：绝对； 顶部：0； 左：0； 宽度：100%； 高度：100%； }