Как я могу изменить размер фрейма? - PullRequest
Новая
       13

Как я могу изменить размер фрейма?

33 голосов
/ 14 ноября 2011

У нас есть этот групповой проект, и мне поручили сделать определенный iframe изменяемый размер. Я читал много сообщений на форуме с прошлой недели, и я обнаружил, что размер iframe не может быть изменен.

Есть ли способ сделать мой iframe изменяемого размера?

Ответы [ 7 ]

46 голосов
/ 24 октября 2014

Это можно сделать в чистом CSS, например, так: 

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

Установите высоту и ширину в соответствии с минимальным размером, который вы хотите, он только увеличивается, а не уменьшается.Живой пример: https://jsfiddle.net/xpeLja5t/

Этот метод имеет хорошую поддержку во всех основных браузерах, кроме IE .

14 голосов
/ 14 ноября 2011

Эти шаги сделают изменяемый размер фрейма:

  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 

    <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
    });
});
9 голосов
/ 28 марта 2014

С пользовательским интерфейсом jQuery ...

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/

Объяснение:

Поскольку плагин resizable пользовательского интерфейса jQuery не будет работать непосредственно с iframe, поместите iframe в div и измените его размер.Событие resize в приведенном выше коде обеспечивает изменение размера iframe в соответствии с div.

Однако в этом методе есть дополнительная проблема - iframes не передают события перемещения мыши родительскому элементу.Чтобы обойти это, события start и stop покрывают iframe другим элементом во время изменения размера, так что плагин resizable может правильно отслеживать движение мыши.

По некоторым причинам, даваяОбертка div явный размер необходим для изменения размера для работы.В большинстве случаев это означает, что для iframe необходим одинаковый размер, поэтому он соответствует размеру div с самого начала.

7 голосов
/ 31 декабря 2011

Если вы еще не нашли решение, у меня есть успех с:

Jquery: 

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

HTML: 

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

Надеюсь, это поможет

3 голосов
/ 14 ноября 2011

Я нашел ваше решение:

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});
        }
    });
});
2 голосов
/ 14 ноября 2011

Лучшее решение, которое я нашел, это установить ширину и высоту iframe на 100% и поместить iframe в тег div.Это основное решение, которое вы видите с такими инструментами, как CKEditor.

Например, у меня есть несколько диалогов jQuery, которые делают именно это на сайте Untah's Disclosures .Если вы щелкнете по отчету или утверждению или, вы увидите всплывающее диалоговое окно с вставленным в него фреймом.Надеюсь, это поможет.

0 голосов
/ 23 января 2014

очень просто,

первый -

добавить 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/

...