IFrameを動的にサイズ変更可能にする

私は3つのiframeを持つ以下のHTMLページを持っています。私はユーザーがJavascriptを使って手動でiframeの高さと幅のサイズを変更できるようにしたいと考えています。IFrameを動的にサイズ変更可能にする

<body> 
<table> 
    <tr> 
     <td colspan="2" id = "freebase_td"> 
     <iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe> 
     </td> 
    </tr> 
    <tr> 
     <td align="left" id = "wiki_td"> 
     <iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe> 
     </td> 
     <td align="right" id = "imdb_td"> 
     <iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe> 
     </td> 
    </tr> 
</table> 
</body>

出典

2011-10-19 Saurabh Saxena

あなたの最善の策は、本当にそのようjQueryUI Resizableとして、これを行うには、ライブラリを使用することです - インターブラウザの癖の多くは、この権利を行うことです。特に、ユーザーが任意のサイズ/サイズを指定できるようにする必要があり、ドラッグ可能なサイズ変更ハンドルは、ほとんどの場合、ユーザーが要素のサイズを変更できる最も直感的な方法です。 iframeのサイズを変更するだけであればiframeの幅/高さを直接設定するのは問題ありませんが、ユーザーから直感的な方法で新しい幅や高さを取得するには何もしません。

Resizing iFrame with jQuery UIも参照してください。iframeをdivにラップし、iframeをheight = 100％width = 100％に設定し、divをサイズ変更可能にする必要があります。裸のiframe Draggableを作成すると、ドラッグ＆サイズ変更が正しく機能しません。（これは、jQueryのバグそのものではなく、一部のブラウザでのイベントバブリングの制限です。）

出典

2011-10-19 04:33:36 Ian

これは機能しませんか？

document.getElementById('wiki_frame').style.width = '300px';

出典

2011-10-19 04:14:42 endyourif

- > http://jsfiddle.net/QATUR/ – Gibron

iFramesは呪いを避けるように選択します。私はあなたが尋ねたものではありませんが、これは絶対ではないことを知っていますが、jQueryUI's Resizableをチェックしてください。

基礎的な構造を変更した場合、これははるかに拡張性の高い/長期的な解決策です。

注：サイズ変更可能な要素はすべてのDOM要素に適用できます。

出典

2011-10-19 04:23:11 Gibron

$(function(){ 
    $("table td").css({position:'relative'}) 
    $("div.resizer").appendTo($("table td")).each(function(){ 

    $(this).width(20); 
    $(this).height(20); 
    $(this).css({ 
      position:"absolute", 
      top: $(this).parent().height() - 20, 
      left: $(this).parent().width() - 20 
    }); 
    var resize = false; 
    var $td; 
    var pos; 
    $(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});}); 
     $(document).mousemove(function(e){ 

      if(resize){ 
        $td.height($td.height() + e.pageY - pos.top); 
        $td.width($td.width() + e.pageX- pos.left); 
      } 
     }); 
     $(document).mouseup(function(){ 

      resize = false; 
     }); 
    }); 
})();

出典

2011-10-19 04:27:47 Anoop

最新のブラウザではjavascriptは必要ありません。ほんの少しhtml + css trick。 resizeプロパティが有効になっているdivにiframeをカプセル化します。

<div> 
    <iframe src="https://www.example.com/"></iframe> 
</div> 

<style> 
div { 
    overflow: hidden; 
    resize: both; 
} 
iframe { 
    height: 100%; 
    width: 100%; 
    border: none; 
} 
</style>

デモ：うんそれは作品https://jsfiddle.net/eliz82/k53a41ej/

出典

2017-11-15 09:43:09 eliz82

IFrameを動的にサイズ変更可能にする

答えて

関連する問題