我想在用户点击链接时显示一个包含iframe的jquery对话框。不幸的是我无法设置它以便在所有主要浏览器（Chrome，IE，FF，Safari和Opera）中单击对话框中的关闭（X）时对话框正常关闭我可以专门为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中会出现同样的行为。
有谁知道如何更改上面的代码，以便它在两种浏览器中都有效？
以下代码似乎适用于所有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个对话框时，此代码和上面显示的代码存在问题。也就是说，当关闭第二个对话框时，对话框内容在使用IE浏览时仍然可见。能够同时浏览2个对话框并正确关闭它们将非常有用。
<!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>
行。我的PHP脚本生成的以下HTML代码现在似乎适用于所有主流浏览器（Chrome，IE，FF，Safari和Opera）。我做了两件事。首先我设置了wmode模式。根据{{3}}，Flash Player接管所有渲染并影响分层。我还将从1.10.2使用的jquery版本更改为1.9.1。显然在版本1.10.0中，z-indexing行为已更改。有关详细信息，请参阅Flash on top of jQuery dialog和Why jQuery UI 1.10 remove jquery dialog zIndex option?。
这两项更改似乎解决了以下两个问题。
（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>
如果需要在调用方法的对话框中添加按钮，则可能需要使用jqueryui库的1.9.2版，同时将jquery（core）版本保持在1.9.1。这是因为在这种情况下，1.9.2的ui比1.9.1更容易失败。实际上，ui的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>
如果jqueryui / 1.9.2在第3行更改为jqueryui / 1.9.1则失败。
如上面在更新3中所述，我使用1.9版而不是1.10或1.11的原因是因为在使用这些更高版本时，我无法找到一种方法来同时浏览2个Flash文件而无需点击一个对话框将另一个内容重置为开始帧。鉴于到目前为止花了多少精力，我可能会坚持使用1.9.1版本的核心版本和1.9.2版本的ui。今天是05Feb14和1.9.1是从2013年3月13日到2013年5月24日的最新稳定版本。
我开始意识到实现符合浏览器的简单代码是多么具有挑战性，以及为什么在执行此操作时仔细选择jQuery版本非常重要！昨天可能会成为我遇到过jQuery最令人沮丧的日子之一。