Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Два iframe в dialog не дружат. Сбрасывается содержимое (https://javascript.ru/forum/dom-window/41470-dva-iframe-v-dialog-ne-druzhat-sbrasyvaetsya-soderzhimoe.html)

andrewinc 15.09.2013 19:22

Два iframe в dialog не дружат. Сбрасывается содержимое
 
Возникла проблема:
При создании двух и более диалоговых окон на базе iFrame средствами jQueryUI наблюдается сбрасывание содержимого фрейма.
Что неприемлемо, т.к. в разных диалоговых окнах могут быть открыты разные формочки, часть полей из которых может быть пользователем заполнена.
В качестве примера, код

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Тест двух диалогов в одном окне</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
        <script type="text/javascript">
            var ifr=function(){
                var file=this.id+'.html', id=this.id+'_dialog';
                var $w=$("<iframe/>").attr({src:file, id:id, title:file, wodth: '100%', height: '100%'}).css({padding:0,margin:0, border: 'none'}).appendTo('body');
                $w.dialog();
            }
            $(function(){
                $("#ifr1, #ifr2").click(ifr)
            })
        </script>
    </head>
    <body>
        <h1>Тест двух диалогов в одном окне</h1>
        <button id="ifr1">Dialog1</button>
        <button id="ifr2">Dialog2</button>
    </body>
</html>


ifr1.html
<!DOCTYPE html>
<html>
    <head>
        <title>iFrame1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>iFrame1</h1>
        <input id="text1" type="text" value="" placeholder="Введите что-нибудь"/>
    </body>
</html>


ifr2.html
<!DOCTYPE html>
<html>
    <head>
        <title>iFrame2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h1>iFrame2</h1>
        <input id="text1" type="text" value="" placeholder="Введите что-нибудь"/>
    </body>
</html>

Или, рабочий код здесь: http://jqueryui.jwork.ru/
Проблема появляется после ввода в текстовое поле одного и второго окна и клику по заголовку противоположного окна (что сейчас не в фокусе), особенно часто при некотором наложении диалогов друг на друга, и при попытке перетащить неактивный диалог (за заголовок окна).
Традиционный вопрос, кто знаетчто происходит? почему это происходит? ну и ключевой - как побороть?
P.S. пробовал в Opera, Chrome, Firefox, Safari везде наблюдается

рони 15.09.2013 19:55

Цитата:

Сообщение от andrewinc
wodth

может width ?

andrewinc 15.09.2013 19:58

Цитата:

Сообщение от рони (Сообщение 272328)
может width ?

действительно, width... но, эта правка никак не влияет на решение проблемы

рони 15.09.2013 20:14

andrewinc,
при перетаскивании идёт обновление iframe поэтому содержимое сбрасывается
Цитата:

Сообщение от andrewinc
почему это происходит?


andrewinc 15.09.2013 20:25

Цитата:

Сообщение от рони (Сообщение 272331)
andrewinc,
при перетаскивании идёт обновление iframe поэтому содержимое сбрасывается

а решить как-нибудь эту проблему можно... чтобы iframe не перезапрашивался?
Может в настройках $('xx').dialog() какой-нибудь режим выставить, или может как-нибудь состояние iфрейма можно сохранять а потом восстанавливать?
на крайняк (совсем некрасиво), может влезть в библиотеку и что-нибудь там кастрировать, специально для этих целей (возможно вначале сделав клон $.ui.dialog)?

Deff 16.09.2013 16:23

andrewinc,
фреймы складывать в конец body с абсолютной позицией
при перемещениях окна, задавать им нужные координаты вставки left и top


Часовой пояс GMT +3, время: 02:45.