web-dev-qa-db-ja.com

iframeのサイズを変更するにはどうすればよいですか？

このグループプロジェクトがあり、特定のiframeのサイズを変更できるように割り当てられました。私は先週から多くのフォーラムの投稿を読んできましたが、iframe自体はサイズ変更できないことがわかりました。

iframeをサイズ変更可能にする方法はありますか？

csscss3iframeresizable
33
amielopez

これは、次のように純粋なCSSで実行できます。

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

高さと幅を必要な最小サイズに設定します。縮小するのではなく、拡大するだけです。

ライブの例： https://jsfiddle.net/xpeLja5t/

この手法には IEを除くすべての主要なブラウザーで良好なサポート があります。

46
Nicole Sullivan

次の手順により、iframeのサイズを変更できます。

  1. サイズ変更用のdivを作成します。例えば：

    <div class="resizable"></div>

  2. Divのスタイルにスタイルタグを適用します。

    .ui-resizable-helper {
    border: 1px dotted gray;
}
.resizable {
    display: block;
    width: 400px;
    height: 400px;
    padding: 30px;
    border: 2px solid gray;
    overflow: hidden;
    position: relative;
}
iframe {
    width: 100%;
    height: 100%;
}

  3. JQueryとjQuery UIを含める

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  4. Resizableを実行します

    $(function () {
    $(".resizable").resizable({
        animate: true,
        animateEasing: 'swing',
        animateDuration: 500
    });
});
14
kuldeep raj

JQuery UIを使用...

HTML：

<div class="resizable" style="width: 200px; height: 200px;">
    <iframe src="http://www.example.com/" style="width: 100%; height: 100%;"></iframe>
</div>

JavaScript：

$(".resizable").resizable({
    start: function(event, ui) {
        ui.element.append($("<div/>", {
            id: "iframe-barrier",
            css: {
                position: "absolute",
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
                "z-index": 10
        }
        }));
    },
    stop: function(event, ui) {
        $("#iframe-barrier", ui.element).remove();
    },
    resize: function(event, ui) {
        $("iframe", ui.element).width(ui.size.width).height(ui.size.height);
    }
});

jsFiddle： http://jsfiddle.net/B5vHQ/97/

説明：

JQuery UIのresizableプラグインはiframeで直接機能しないため、iframeをdivでラップし、代わりにdivのサイズを変更します。上記のコードのresizeイベントにより、iframeがdivに合わせてサイズ変更されます。

ただし、この方法には追加の問題があります-iframeは、マウス移動イベントを親要素に渡しません。これを回避するために、startおよびstopイベントは、サイズ変更中にiframeを別の要素で覆い、resizableプラグインがマウスの動きを正しく追跡できるようにします。

何らかの理由で、サイズ変更を機能させるには、ラッパーdivに明示的なサイズを指定する必要があります。ほとんどの場合、これはiframeが同じサイズセットを必要とすることを意味するため、最初からdivのサイズと一致します。

9
Brilliand

あなたがまだ解決策を見つけていない場合、私は成功しました：

Jquery：

$("#my-div-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

HTML：

<div id="my-div-frame-wrapper">
    <iframe id="myframe"></iframe>
</div>

私はそれが役立つことを願っています

7
Sthe

私はあなたの解決策を見つけました：

HTML：

<div id="resizable" class="ui-widget-content" 
     style="border-style:solid; height:400px; width:400px">
    <h3 class="ui-widget-header">Resizable</h3>
    <iframe src="test.aspx" id="myfr" scrolling="no"
            frameborder="0" marginheight="0" marginwidth="0" >
        Your Browser Do not Support Iframe
    </iframe>
</div>

JQUERY：

$(function() {
    $("#resizable").resizable();

    $("#resizable").resizable({
        resize: function(event, ui) {
            $("#myfr").css({ "height": ui.size.height,"width":ui.size.width});
        }
    });
});
3
Mayur Borad

私が見つけた最良の解決策は、iframeの幅と高さを100％に設定し、divタグ内にiframeを配置することです。これは、CKEditorなどのツールで見られる基本的なソリューションです。

たとえば、 ユタの開示サイト でそれを行うjQueryダイアログがいくつかあります。レポートまたはorのステートメントをクリックすると、iframeを含むポップアップダイアログが表示されます。それが役に立てば幸い。

2
uadrive

非常に簡単、

最初 -

jqueryを追加し、 jquery-ui -

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

その後-

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

最後-

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

完了しました！

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>

フォーム http://jqueryui.com/resizable/

0
Vibhaas Srivastava