Реализация диалогов, совместимых с браузером, используя jQuery
Я хотел бы показать диалоговое окно jquery, которое содержит iframe, когда пользователь нажимает на ссылку. К сожалению, я не могу установить это так, чтобы диалоговое окно закрывалось должным образом при нажатии кнопки закрытия (X) в диалоговом окне во всех основных браузерах (Chrome, IE, FF, Safari и Opera). Я могу написать код специально для IE или Safari, но до сих пор мои попытки написать общий код, работающий в обоих, потерпели неудачу.
Ниже показан мой код.
<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function () {
$('a#pop1').click(function() {
var page = "Cookie law.swf";
var $dialog1 = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: false,
height: 625,
width: 500,
title: "Some title",
close: function (event, ui) {
$dialog1.html("destroy");
},
});
$dialog1.dialog('open');
});
});
</script>
<a id="pop1" href='#'>My SWF</a>
Приведенный выше код работает во всех браузерах, кроме IE. Когда я щелкаю значок закрытия, диалоговое окно исчезает, но содержимое диалога остается видимым. Единственный способ, которым я могу заставить полное всплывающее окно исчезнуть, - удалить (по иронии судьбы) строку, которая говорит: $dialog1.html("destroy"). Причина, по которой я включил эту строку, заключается в том, что без нее такое же поведение происходит в Safari.
Кто-нибудь знает, как изменить приведенный выше код, чтобы он работал в обоих браузерах?
Обновление 1
Следующий код работает во всех 5 браузерах.
$('a#pop1').click(function() {
var page = "Cookie law.swf";
var $dialog1 = $('<div></div>')
.html('<iframe id="myiframe" style="border: 1px solid red; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: false,
height: 625,
width: 500,
title: "Some title",
close: function (event, ui) {
document.getElementById("myiframe").contentDocument.documentElement.innerHTML = "";
},
});
$dialog1.dialog('open');
});
Обновление 2
Ниже показан более простой код при одновременном просмотре 2 диалогов. Однако есть проблема с этим кодом и кодом, показанным выше, когда 2 диалоговых окна открыты. То есть при закрытии второго диалога содержимое диалога остается видимым при просмотре с помощью IE. Очень полезна возможность одновременного просмотра двух диалогов и их правильного закрытия.
<!DOCTYPE HTML>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="Stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.10.2/themes/smoothness/jquery-ui.css">
<!-- -->
<a id="pop1" href='#'>First SWF</a>
<script>
$(document).ready(function () {
$('a#pop1').click(function() {
var page1 = "Cookie law.swf";
var $dialog1 = $('<div></div>')
.html('<iframe id="myiframe1" style="border: 0px; " src="' + page1 + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: false,
height: 625,
width: 500,
title: "Some title",
close: function (event, ui) {
$("#myiframe1").contents().find("body").html('');
},
});
$dialog1.dialog('open');
});
});
</script>
<!-- -->
<a id="pop2" href='#'>Second SWF</a>
<script>
$(document).ready(function () {
$('a#pop2').click(function() {
var page2 = "cookies_guidance_v3.swf";
var $dialog2 = $('<div></div>')
.html('<iframe id="myiframe2" style="border: 0px; " src="' + page2 + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: false,
height: 625,
width: 500,
title: "Some title",
close: function (event, ui) {
$("#myiframe2").contents().find("body").html('');
},
});
$dialog2.dialog('open');
});
});
</script>
Обновление 3
ХОРОШО. Следующий HTML-код, созданный моим PHP-скриптом, теперь работает во всех основных браузерах (Chrome, IE, FF, Safari и Opera). Я сделал 2 вещи. Сначала я установил режим wmode. Согласно Flash в верхней части диалогового окна jQuery, Flash Player берет на себя весь рендеринг и влияет на слои. Я также изменил используемую версию jquery с 1.10.2 на 1.9.1. По-видимому, в версии 1.10.0 поведение z-indexing было изменено. См. Почему jQuery UI 1.10 удаляет диалог jquery zIndex? и http://bugs.jqueryui.com/ticket/9166?cversion=0&cnum_hist=6 для получения дополнительной информации.
Эти 2 изменения, кажется, решили следующие 2 проблемы.
(a) Нежелательный сброс кадра к первому кадру во втором диалоговом окне при нажатии первого диалогового окна.
(b) Невозможность заставить содержимое диалога исчезать при нажатии на значок закрытия в верхнем правом углу диалога.
<!--
This simplified PHP script enables SWF files converted from multipage PDF documents
and combined with a viewer to be simultaneously viewed and navigated.
A link is displayed for each SWF file which when clicked shows the SWF in a popup dialog
which can be dragged across and placed anywhere on the screen.
The dialogs are scaled to maximum size which can fit on the screen.
-->
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<!-- Adds the link -->
<a id='opener0' style='color:blue;cursor:pointer'>View Cookie law.swf</a><br />
<!-- Sets the dialog behaviour when the link is clicked and the dialog is closed -->
<script>
$(function() {
$("#dialog0").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
});
$("#opener0").click(function() {
// Gets the margins surrounding the SWF
var horizontal_margin='60';
var vertical_margin='60';
// Gets the browser aspect ratio
var browser_width = $(window).width();
var browser_height = $(window).height();
var browser_aspect_ratio=browser_width/browser_height;
// Gets the SWF aspect ratio
var swf_width='695';
var swf_height='842';
var swf_aspect_ratio=swf_width/swf_height;
//Gets width and height of the SWF which will fit the browser
if(swf_aspect_ratio < browser_aspect_ratio){
// If the aspect ratio of the swf is less than that of the browser
// then the height of the swf is limited by the height of the browser.
swf_height=browser_height-vertical_margin*2;
swf_width=swf_height*swf_aspect_ratio;
}else{
// If the aspect ratio of the browser is less than that of the swf
// then the width of the swf is limited by the width of the browser.
swf_width=browser_width-horizontal_margin*2;
swf_height=swf_width/swf_aspect_ratio;
}
// Sets width and height of the SWF
$('.myobject0').width(swf_width);
$('.myobject0').height(swf_height);
$('.myembed0').width(swf_width);
$('.myembed0').height(swf_height);
// Carries out actions on the dialog
$("#dialog0").dialog({width:'auto'});
$("#dialog0").dialog("open");
$("#dialog0").dialog("option", "title", 'Viewer'); //prevents annoying tooltip if set in div
});
});
</script>
<!-- Adds content (i.e. the SWF file) to the dialog which appears when the link is clicked -->
<div id='dialog0' style='border:0px solid blue;display: none;'>
<object class='myobject0' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
style='border:0px solid green;'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0'>
<param name='movie' value='http://vhosts/work/Cookie law.swf' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed class='myembed0' src='http://vhosts/work/Cookie law.swf' style='border:0px solid green;'
quality='high' bgcolor='#FFFFFF' align='left' type='application/x-shockwave-flash'
pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Adds the link -->
<a id='opener1' style='color:blue;cursor:pointer'>View cookies_guidance_v3.swf</a><br />
<!-- Sets the dialog behaviour when the link is clicked and the dialog is closed -->
<script>
$(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
});
$("#opener1").click(function() {
// Gets the margins surrounding the SWF
var horizontal_margin='60';
var vertical_margin='60';
// Gets the browser aspect ratio
var browser_width = $(window).width();
var browser_height = $(window).height();
var browser_aspect_ratio=browser_width/browser_height;
// Gets the SWF aspect ratio
var swf_width='595';
var swf_height='842';
var swf_aspect_ratio=swf_width/swf_height;
//Gets width and height of the SWF which will fit the browser
if(swf_aspect_ratio < browser_aspect_ratio){
// If the aspect ratio of the swf is less than that of the browser
// then the height of the swf is limited by the height of the browser.
swf_height=browser_height-vertical_margin*2;
swf_width=swf_height*swf_aspect_ratio;
}else{
// If the aspect ratio of the browser is less than that of the swf
// then the width of the swf is limited by the width of the browser.
swf_width=browser_width-horizontal_margin*2;
swf_height=swf_width/swf_aspect_ratio;
}
// Sets width and height of the SWF
$('.myobject1').width(swf_width);
$('.myobject1').height(swf_height);
$('.myembed1').width(swf_width);
$('.myembed1').height(swf_height);
// Carries out actions on the dialog
$("#dialog1").dialog({width:'auto'});
$("#dialog1").dialog("open");
$("#dialog1").dialog("option", "title", 'Viewer'); //prevents annoying tooltip if set in div
});
});
</script>
<!-- Adds content (i.e. the SWF file) to the dialog which appears when the link is clicked -->
<div id='dialog1' style='border:0px solid blue;display: none;'>
<object class='myobject1' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
style='border:0px solid green;'
codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0'>
<param name='movie' value='http://vhosts/work/cookies_guidance_v3.swf' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed class='myembed1' src='http://vhosts/work/cookies_guidance_v3.swf' style='border:0px solid green;'
quality='high' bgcolor='#FFFFFF' align='left' type='application/x-shockwave-flash'
pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
Обновление 4
Если есть необходимость добавить кнопки в диалоги, которые вызывают методы, вы можете использовать версию 1.9.2 библиотеки jqueryui, сохранив версию jquery (core) на уровне 1.9.1. Это связано с тем, что 1.9.2 пользовательского интерфейса имеет меньшую склонность к сбою в этом контексте, чем 1.9.1. На самом деле версия 1.9.1 пользовательского интерфейса дает сбой и выдает сообщение об ошибке, в котором говорится, что вы не можете добавить методы до инициализации. (Я потратил целый день вчера, безуспешно пытаясь найти решение этой проблемы. Я нашел это решение только сегодня, потратив на это все утро.)
Следующий код работает.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<!-- Shows the link which is clicked-->
<a id='cookie_opener' style='color:blue;cursor:pointer;'>Click me</a>
<script>
$(function() {
// Initializes the dialog
$("#cookie_dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {$(this).dialog( "close" );}
}
});
// Adds methods to the dialog
$("#cookie_opener").click(function() {
$("#cookie_dialog").dialog("open");
});
});
</script>
<!-- Shows the dialog when the dialog is opened -->
<div id='cookie_dialog'>Dialog content goes here.</div>
Если в 3-й строке jqueryui/1.9.2 изменить на jqueryui/1.9.1, произойдет сбой.
Как отмечалось выше в обновлении 3, причина, по которой я использую версию 1.9 вместо 1.10 или 1.11, заключается в том, что при использовании этих более поздних версий я не мог найти способ удовлетворить потребности Google Chrome при одновременном просмотре 2 файлов Flash без щелчков в одном диалоговом окне сброса содержимое в другом обратно в начальный кадр. Я могу придерживаться версии 1.9.1 для ядра и 1.9.2 для пользовательского интерфейса в течение нескольких лет, учитывая, сколько усилий было потрачено на достижение этой точки. Сегодня 05Feb14 и 1.9.1 была последней стабильной версией ядра с 04Feb13 по 24May13.
Я начинаю понимать, насколько сложно реализовать совместимый с браузером простой код и почему так важно тщательно выбирать версию jQuery при этом! Возможно, вчерашний день станет одним из самых разочаровывающих дней, в которых я когда-либо сталкивался с jQuery.