我希望同时打开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>
Implementing browser-compliant dialogs using jQuery(请参阅该链接中的更新3)显示了此问题的解决方案。