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

Ответ 1

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

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

Установите высоту и ширину на минимальный размер, который вам нужен, он только растет, а не уменьшается.

Пример в реальном времени: https://jsfiddle.net/xpeLja5t/

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

Ответ 2

Эти шаги сделают изменяемый размер 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

   <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
       });
   });
   

Ответ 3

С 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 справа от начала.

Ответ 4

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

Jquery:

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

HTML:

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

Я надеюсь, что это поможет

Ответ 5

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

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});
        }
    });
});

Ответ 6

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

В качестве примера у меня есть некоторые диалоги jQuery, которые делают это только на сайте рассылки Юты. Если вы нажмете на отчет или инструкцию или, вы увидите диалоговое окно, в котором появляется iframe. Надеюсь, что это поможет.

Ответ 7

очень легко,

сначала -

добавить 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="#" onclick="location.href='http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'; return false;">
<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>

form http://jqueryui.com/resizable/