Сделать IFrames изменяемого размера динамически - PullRequest
Новая
       4

Сделать IFrames изменяемого размера динамически

0 голосов
/ 19 октября 2011

У меня есть следующая HTML-страница, на которой у меня есть три фрейма. Я хотел бы позволить пользователям изменять размеры высоты и ширины фреймов вручную, используя Javascript. 

<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>

Ответы [ 5 ]

3 голосов
/ 19 октября 2011

Лучше всего на самом деле использовать для этого библиотеку, например jQueryUI Resizable - с этим можно столкнуться со многими хитростями между браузерами. Особенно, когда вам нужно разрешить пользователю указывать произвольный размер / изменение размера, а перетаскиваемый дескриптор изменения размера почти всегда является наиболее интуитивным способом, позволяющим пользователям изменять размер элемента. Установка ширины / высоты iframe напрямую должна быть приемлемой, если вы просто изменяете размер iframe, но это ничего не делает для интуитивного получения новой ширины / высоты от пользователя.

Также см. Изменение размера iFrame с помощью пользовательского интерфейса jQuery - вам нужно обернуть iframe в div, установить iframe в height = 100% width = 100% и сделать размер div изменяемым. Перетаскивание с изменением размера не будет работать правильно, если вы сделаете голый iframe Draggable. (Это ограничение пузыря событий в некоторых браузерах, а не ошибка jQuery как таковая.)

1 голос
/ 19 октября 2011

Я предпочитаю избегать фреймов как проклятие. Я знаю, что это не совсем то, о чем вы просили, но посмотрите Resizable jQueryUI.

Если вы измените основную структуру, вы можете найти это гораздо более масштабируемое / долгосрочное решение.

Примечание. Изменение размера можно применять к ЛЮБОМУ DOM-элементу!

0 голосов
/ 15 ноября 2017

вам не нужен javascript для этого в современных браузерах.просто маленький трюк HTML + CSS.инкапсулируйте ваш iframe в div с включенным свойством resize. 

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

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

demo: https://jsfiddle.net/eliz82/k53a41ej/

0 голосов
/ 19 октября 2011 
$(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;
      });
    });
})();
0 голосов
/ 19 октября 2011

Разве это не работает? 

document.getElementById('wiki_frame').style.width = '300px';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...