Удалите “Flash” между страницами при использовании Internet Explorer модальные поля
У меня есть внутреннее веб-приложение, которое является конкретным IE, и использует много IE определенные модальные поля: (window.showModalDialog).
Я недавно получил запрос для удаления "флэш-памяти" при навигации между страницами сайта. Для выполнения этого я просто добавил meta тег перехода к своей основной странице:
<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />
Это работает отлично за исключением модальных полей. Когда Вы запускаете модальное поле и затем перемещаете его, веб-страница позади него сохраняет след модального поля вместо того, чтобы перерисовать содержание веб-страницы. Это препятствует тому, чтобы пользователь переместил модальное поле для чтения чего-либо, что было позади него.
Существует ли способ предотвратить "флэш-память" между страницами в IE, определенный сайт и иметь сайт все еще работает с модальными полями?
Отметьте, это - большой и сложный сайт, таким образом повторно проектирование его для не использования модальных полей не является опцией.
Это - asp.net, c# веб-приложение, и все мои пользователи используют IE 7 и IE 8, если это имеет какое-либо значение.
Править-
Для дублирования этого поместите следующее в страницу 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 ответа
Вы пробовали решения с этой страницы ? В нем говорится, что вам нужно добавить элемент в раздел заголовка (если у вас есть проблема с нестилизованным контентом [не проблема с белой страницей]).
Также из Yahoo's Best Practices :
В спецификации HTML четко указано, что таблицы стилей должны быть включены в HEAD страницы: «В отличие от A, [LINK] может отображаться только в разделе HEAD. документа, хотя он может появляться сколько угодно раз ». Ни одна из альтернатив - пустой белый экран или мигание нестилизованного контента - не стоит риска. Оптимальное решение - следовать спецификации HTML и загружать таблицы стилей в документ HEAD.
Убедитесь, что у вас есть элемент в заголовке всех ваших страниц, и убедитесь, что вы поместили эти таблицы стилей в верх раздела заголовка и элементы после их (желательно ПОСЛЕ всего содержимого страницы и непосредственно перед закрывающим тегом).
Я знаю, что вы сказали, что не можете использовать модальные окна, но я решил поделиться этим примером модального окна JS с использованием jQuery и facebox . Вам даже не нужно изменять ваши вызовы showModalDialog (если вы все же в конечном итоге используете этот модальный метод, вы все равно можете использовать свой трюк с переходом от мета-страницы к странице выхода).
window.showModalDialog = function(a){
$.get(a,function(html){
$.facebox(html);
});
};
window.showModalDialog('linkOnSameDomain.htm', window);
Ваша проблема в том, что showModalDialog не обрабатывает поверхности DirectX (что и происходит, когда вы возитесь с фильтрами и переходами). IE не выполняет обновления экрана на нижележащих поверхностях, пока существует диалог. У вас нет выбора, кроме как прекратить создание этих поверхностей (прекратить использование переходов) или использовать всплывающее окно, как показано ниже. Единственная реальная разница заключается в том, что новое окно не блокирует базовую страницу (что, как правило, хорошо, но вам, возможно, придется предотвратить выполнение дальнейших сценариев, если ваше приложение полагается на это), и вам может потребоваться обработать любые кнопки в диалоговом окне. иначе, если вы возвращали результаты родителю (например, ok / cancel).
Имейте в виду, что настройки безопасности IE8 могут ограничивать объем скрытого хрома. Если вам абсолютно необходимо скрыть адресную строку, вам необходимо установить «Разрешить веб-сайтам открывать окна без адресной строки или строки состояния» в соответствующей зоне безопасности для каждого пользовательского ПК.
<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>
Я бы по возможности избегал встроенных переходов между страницами.
Если вы имеете в виду «мигание», это означает перезагрузку страницы между запросами. Я бы рассмотрел две разные области:
Кэширование
Рассмотрите возможность размещения изображений в CSS-спрайтах и / или убедитесь, что у вас есть длинные даты истечения срока действия ваших файлов содержимого. Если ваша страница мигает, это связано с тем, что браузеру приходится захватывать множество данных с сервера при каждом запросе.
CSS-спрайты - CSS-спрайты - это изображения, которые содержат несколько изображений меньшего размера в одном файле, на которые затем ссылаются с помощью свойства CSS background-position. Преимущества этого метода:
- Уменьшение количества запросов к серверу.
- После загрузки одной страницы изображения на других страницах уже кэшируются в браузере (внутри спрайта).
Срок действия контента - Если ваша страница мигает, но макеты страниц одинаковы. Это может быть признаком того, что ваш сервер заставляет ваш браузер истекать срок действия контента между запросами и каждый раз повторно загружать все. Посмотрите на заголовки, устанавливаемые для вашего контента IIS, или подумайте о настройке CDN.
CDN - это веб-сайт, специально созданный для доставки контента для другого сайта.Ключевой особенностью CDN является то, что заголовки и файлы cookie отключены, что ускоряет выполнение запросов и полностью оставляет кеширование браузеру.
Ajax
Если вы хотите полностью избежать мигания страницы, вам нужно начать отправлять запросы страницы с помощью запросов в стиле Ajax. Поскольку вы используете ASP.NET, в вашем распоряжении есть несколько вариантов, два из которых приведены ниже:
Панели обновления - Панели обновления масштабируются достаточно хорошо, так как вы можете поместить панель обновления вокруг одной кнопки или всю страницу. Все, что находится в панели обновления, отправляется на сервер с помощью запроса Ajax, после чего панель обновляется с результатами. Никаких всплывающих страниц! Я не использую панели обновления в пользу следующего варианта, который обеспечивает больший контроль, но является более продвинутым.
jQuery и веб-службы - то, что я описал выше, но управление процессом с помощью веб-служб (или методов страницы) и методов Ajax jQuery.
Надеюсь, это поможет,
Рич