Я хотел бы, чтобы одновременно открывались 2 диалога jquery и независимо перемещались по их содержимому. Моя проблема в том, что когда я нажимаю в любом месте в одном диалоговом окне, он сбрасывает содержимое в другом. Это происходит только в Chrome и не происходит ни в IE, ни в Firefox.
Содержимое представляет собой файл Flash с несколькими кадрами. Показанный кадр можно изменить, нажав кнопку, которая была добавлена как часть файла Flash. Все это было сделано с помощью исполняемых файлов SWFTOOLS. «Сброс» означает возврат к начальному кадру.
Когда файлы Flash отображаются непосредственно в HTML без диалогового окна, сброс в Chrome не происходит. Таким образом, проблема возникает только при использовании Chrome для просмотра содержимого в диалоговом окне jquery.
Как я могу изменить свой сценарий, чтобы в Chrome не происходило взаимодействия? В противном случае, по каким терминам я должен искать, чтобы точно определить, что мне нужно делать?
Мой код PHP и Javascript показан ниже.
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<?php
$file_details=array(
array('filename'=>'Cookie law.swf','width'=>695,'height'=>842),
array('filename'=>'cookies_guidance_v3.swf','width'=>595,'height'=>842),
);
foreach($file_details as $id=>$file_detail){
extract($file_detail);
openDialog($id,$filename,$width,$height);
}
?>
<?php
function openDialog($id,$filename,$width,$height){
$url_dirname='http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']);
$url=$url_dirname.'/'.$filename;
?>
<!-- Adds the link -->
<a href=# id='opener<?php echo $id ?>' >View <?php echo $filename ?></a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog<?php echo $id ?>' style='border:0px solid blue;display: none;'>
<object 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' width='<?php echo $width ?>' height='<?php echo $height ?>' align='' >
<param name='movie' value='<?php echo $url ?>' />
<param name='quality' value='high' />
<param name='bgcolor' value='#FFFFFF' />
<param name='wmode' value='opaque'>
<embed src='<?php echo $url ?>' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='<?php echo $width ?>' height='<?php echo $height ?>' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog<?php echo $id ?>").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener<?php echo $id ?>").attr('src','./icons/view2.png');
},
});
$("#opener<?php echo $id ?>").click(function() {
$("#dialog<?php echo $id ?>").dialog({width:'auto'});
$("#dialog<?php echo $id ?>").dialog("open");
$("#dialog<?php echo $id ?>").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
<?php
}
?>
Ниже показан результирующий HTML.
<!DOCTYPE HTML>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!-- Adds the link -->
<a href=# id='opener0' >View Cookie law.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog0' style='border:0px solid blue;display: none;'>
<object 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' width='695' height='842' align='' >
<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 src='http://vhosts/work/Cookie law.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='695' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog0").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener0").attr('src','./icons/view2.png');
},
});
$("#opener0").click(function() {
$("#dialog0").dialog({width:'auto'});
$("#dialog0").dialog("open");
$("#dialog0").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
<!-- Adds the link -->
<a href=# id='opener1' >View cookies_guidance_v3.swf</a><br /><br />
<!-- Adds content to the dialog box which appears when the link is clicked -->
<div id='dialog1' style='border:0px solid blue;display: none;'>
<object 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' width='595' height='842' align='' >
<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 src='http://vhosts/work/cookies_guidance_v3.swf' style='border:0px solid green;' quality='high' bgcolor='#FFFFFF' width='595' height='842' align='left' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' wmode='opaque'/>
</object>
</div>
<!-- Acts when the link is clicked -->
<script>
$(function() {
$("#dialog1").dialog({
autoOpen: false,
show: {
effect: 'fade',
duration: 300,
},
hide: {
effect: 'fade',
duration: 300,
},
beforeClose:function(){
$("#opener1").attr('src','./icons/view2.png');
},
});
$("#opener1").click(function() {
$("#dialog1").dialog({width:'auto'});
$("#dialog1").dialog("open");
$("#dialog1").dialog("option", "title", 'Viewer'); //set here to prevent annoying tooltip if set in div
$(this).attr('src','./icons/eye.png');
});
});
</script>
Обновлять
Реализация совместимых с браузером диалогов с использованием jQuery (см. Обновление 3 по этой ссылке) показывает решение этой проблемы.
