Удалите «Flash» между страницами при использовании модальных окон Internet Explorer - PullRequest
Новая
       7

Удалите «Flash» между страницами при использовании модальных окон Internet Explorer

6 голосов
/ 09 апреля 2010

У меня есть внутреннее веб-приложение, которое специфично для IE, и использует много модальных окон, специфичных для IE: (window.showModalDialog).

Недавно я получил запрос на удаление «флеш» при переходе между страницами сайта. Для этого я просто добавил мета-тег перехода на мою главную страницу: 

<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />

Это работает отлично, за исключением модальных коробок. Когда вы запускаете модальное окно, а затем перемещаете его, веб-страница за ним сохраняет след модального окна, а не перерисовывает содержимое веб-страницы. Это не позволяет пользователю перемещать модальное поле, чтобы прочитать все, что было за ним.

Есть ли способ предотвратить «флеш» между страницами на сайте, специфичном для IE, и заставить сайт по-прежнему работать с модальными блоками?

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

Это веб-приложение asp.net, c #, и все мои пользователи используют IE 7 и IE 8, если это имеет какое-либо значение.

-Edit-

Чтобы продублировать это, поместите в HTML-страницу следующее и откройте его в Internet Explorer: 

<html>
<head>
    <title>Test</title>
    <meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body>
<script language="javascript">
    window.showModalDialog('modal.htm', window);
</script>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 13 апреля 2010

Вы пробовали решения с этой страницы ? В нем говорится, что вам нужно добавить элемент в раздел head (если у вас проблема с неустановленным содержимым [не проблема с белой страницей]).

Также из Лучшие практики Yahoo :

В спецификации HTML четко указано, что таблицы стилей должны быть включены в HEAD страницы: «В отличие от A, [LINK] может появляться только в разделе HEAD документа, хотя может появляться любое количество раз». Ни одна из альтернатив, чистый белый экран или вспышка не стилизованного контента, не стоит риска. Оптимальным решением является следование спецификации HTML и загрузка таблиц стилей в документ HEAD.

Убедитесь, что у вас есть элемент в заголовке всех ваших страниц, и убедитесь, что вы поместили эти таблицы стилей в top раздела head и элементы после их (желательно ПОСЛЕ всего содержимого страницы и непосредственно перед закрывающим тегом).

Я знаю, что вы сказали, что вы не можете использовать модалы, но я решил поделиться этим примером JS-модала, используя jQuery и facebox . Вам даже не нужно изменять свои вызовы на «showModalDialog» (если вы в конечном итоге используете этот модальный метод, вы все равно можете использовать свой трюк перехода на мета-страницу-выход из страницы). 

window.showModalDialog = function(a){
     $.get(a,function(html){
         $.facebox(html);
     });
};
window.showModalDialog('linkOnSameDomain.htm', window);
1 голос
/ 16 апреля 2010

Я бы избегал встроенных переходов страниц, если это вообще возможно.

Если «флэш», на который вы ссылаетесь, - это перезагрузка страницы между запросами. Я бы посмотрел на две разные области:

Кэширование

Рассмотрите возможность размещения изображений в CSS Sprites и / или убедитесь, что у вас есть длинные даты истечения срока действия в ваших файлах контента. Если ваша страница мигает, это связано с тем, что браузер при каждом запросе загружает множество файлов с сервера.

CSS-спрайты - CSS-спрайты - это изображения, которые содержат несколько небольших изображений в одном файле, на которые затем ссылается свойство CSS background-position. Преимущества этой техники:

  1. Уменьшены запросы к серверу.
  2. После загрузки одной страницы изображения на других страницах уже кэшируются в браузере (внутри спрайта).

Истечение срока действия контента - если ваша страница мигает, но макеты страниц похожи на разных страницах. Это может быть признаком того, что ваш сервер заставляет ваш браузер истекать контент между запросами и перезагружать все каждый раз. Посмотрите на заголовки, которые устанавливаются на ваш контент IIS, или подумайте о создании CDN.

CDN - это веб-сайт, предназначенный для доставки контента для другого сайта. Ключевой особенностью CDN является то, что заголовки и файлы cookie отключены, что ускоряет запросы и оставляет кеширование полностью браузеру.

Ajax

Если вы хотите полностью избежать вспышки страницы, вам нужно начать отправлять запросы на странице, используя запросы в стиле Ajax. Поскольку вы используете ASP.NET, у вас есть несколько вариантов, ниже приведены два из них:

Обновление панелей - Обновление панелей достаточно хорошо масштабируется, так как вы можете разместить панель обновления вокруг одной кнопки или всей страницы. Все в панели обновлений отправляется обратно на сервер с помощью Ajax-запроса, а затем панель обновляется с результатами. Нет вспышки страницы вообще! Я не использую панели обновления в пользу следующей опции, которая обеспечивает больший контроль, но более продвинута.

jQuery & Web Services - то, что я описал выше, но управление процессом с помощью Web Services (или методов страницы) и методов jjuery Ajax.

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

Rich

1 голос
/ 14 апреля 2010

Ваша проблема в том, что showModalDialog не обрабатывает поверхности DirectX (это то, с чем вы сталкиваетесь, когда возитесь с фильтрами и переходами). IE не выполняет обновления экрана на нижележащих поверхностях, пока существует диалог. У вас нет выбора, кроме как прекратить создание этих поверхностей (прекратить использовать переходы) или использовать всплывающее окно, как показано ниже. Единственное реальное отличие состоит в том, что новое окно не блокирует нижележащую страницу (что, как правило, хорошо, но вам, возможно, придется запретить запуск других сценариев, если ваше приложение использует его), и вам, возможно, придется обрабатывать любые кнопки в диалоговом окне. иначе, если вы возвращали результаты родителю (например, ОК / Отмена).

Имейте в виду, что настройки безопасности IE8 могут ограничивать количество Chrome, которое вы можете скрыть. Если вам абсолютно необходимо скрыть адресную строку, вам необходимо установить «Разрешить веб-сайтам открывать окна без адресной строки или строки состояния» в соответствующей зоне безопасности для каждого ПК пользователя. 

<html>
<head>
    <title>Test</title>
    <meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body style="background: transparent url(/images/backgrounds/brushed_aluminium.jpg) scroll repeat top left">
<script language="javascript">
    var modal = window.open('modal.htm', '_blank', 'height=500,width=600,status=no,toolbar=no,menubar=no,location=no,resizable=no,titlebar=no');
</script>

</body>
</html>
...