我在 fancbox 中加载登录/注册 iframe 时遇到问题。在我升级到 IE10 之前，Iframe 在所有版本的 IE(9,8,7) 中都能完美运行。现在我有报告说，任何尝试使用 IE10 查看此 Iframe/Fancybox 的人现在都遇到了问题。
问题是 Fancybox 的尺寸太小，与 iframe 的尺寸不匹配。所以你最终得到了这个：
仅供参考：一些试图解决该问题的开发人员认为这与“仅显示安全内容”有关。
这是 Fancybox 文件与 jQuery 一起加载的方式：（其中一些可能无关紧要，但 Fancybox 是如何在它使用的页面上设置的）
如果您想自己测试问题，请按照以下步骤操作：
转到此处：http ://www.sony.co.uk/pro/hub/home 将鼠标悬停在“您的企业”主导航选项卡上单击最右侧“渠道合作伙伴”下的任何链接，您将被带到页面打开登录/注册灯箱，在 IE10 中不再正确显示。
仅供参考，如果您安装了 IE10 并使用开发人员工具访问使用 IE9、8、7 标准的页面，那么 fancybox/Iframe 不会像您想象的那样工作。对我来说似乎有点奇怪。
有谁知道如何解决这个问题？
head.js({jquery: "/pro/assets/script/lib/jquery-1.7.1.min.js"});
head.ready("jquery", function() {
head.js({less : "/pro/assets/script/lib/less-1.1.5.min.js"})
.js({main: "/pro/assets/script/jquery-main.js"})
.js({mousewheel : "/pro/assets/script/lib/jquery.mousewheel.min.js"})
.js({validation : "/pro/assets/script/lib/jquery.validate.min.js"})
.js({carousel : "/pro/assets/script/lib/jquery.jcarousel.min.js"})
.js({ui : "/pro/assets/script/lib/jquery-ui-1.8.18.custom.min.js"})
.js({isotope : "/pro/assets/script/lib/jquery-isotope-min.js"})
.js({lightbox : "/pro/assets/script/lib/jquery.fancybox.pack.js"})
.js({scrollpane : "/pro/assets/script/lib/jquery.jscrollpane.min.js"})
.js({autocomplete : "/pro/assets/script/lib/jquery.autocomplete-min.js"})
.js({eloqua : "/pro/assets/script/debug-eloqua.js"});
});
head.ready("jquery", function() {
$("a[class='fancybox.iframe']").on("click", function(e) {
e.preventDefault();
});
});
head.ready("lightbox", function() {
$(function() {
sonypro.popup.init({
trigger : 'a#updateprofile,a#login,a#generic-fancy-box',
fancy_options: {
afterClose : function() {
if ($_refreshOnClose) {
window.parent.location.reload(true);
}
}
}
});
sonypro.popup.init({
trigger : 'a#change-country,a#image-gallery,a#ezone'
});
sonypro.popup.init({
trigger : 'a#restricted-attachment',
fancy_options: {
afterClose : function() {
if (!$_refreshOnClose && $_goHomeOnClose) {
var pattern = /sony\./g;
var referrer = window.parent.document.referrer.split("/");
domainName = referrer[2];
if (pattern.test(domainName)) {
window.parent.location.href = window.parent.document.referrer;
} else {
window.parent.location.href = "http://www.sony.co.uk/pro/hub/home";
}
}
else if ($_refreshOnClose) {
window.parent.location.reload(true);
}
}
}
});
$('#popupRequestLink').fancybox({
afterClose : function() {
if ($_refreshOnClose) {
window.parent.location.reload(true);
}
},
beforeShow: function() {
if ($.browser.msie)
$('.fancybox-wrap').css('visibility', 'hidden');
else
$('.fancybox-wrap').css('margin-top', '-99999px');
},
afterShow: function () {
if ($.browser.msie) {
$('.fancybox-wrap').hide();
$('.fancybox-wrap').css('visibility', 'visible');
}
},
beforeLoad: function () {
$(document.body).append('<iframe id="iframeContentLoader"></iframe>');
$('#iframeContentLoader').attr('src', $(this).attr('href') + '&oc=false');
$('#iframeContentLoader').load(function() {
$.fancybox.hideLoading();
if ($.browser.msie)
$('.fancybox-wrap').fadeIn();
else
$('.fancybox-wrap').css('margin-top', '0');
$(this).remove();
});
},
afterLoad: function () {
$.fancybox.reposition();
$.fancybox.showLoading();
},
helpers : {
overlay : {
closeClick: true
}
}
}).click();
$('#restricted').fancybox({
afterClose : function() {
if (!$_refreshOnClose && $_goHomeOnClose) {
var pattern = /sony\./g;
var referrer = window.parent.document.referrer.split("/");
var currentLocation = window.parent.location.href;
var referrerLocation = window.parent.document.referrer;
domainName = referrer[2];
if (pattern.test(domainName) && referrerLocation != currentLocation) {
window.parent.location.href = window.parent.document.referrer;
} else {
window.parent.location.href = "http://www.sony.co.uk/pro/hub/home";
}
}
else if ($_refreshOnClose) {
window.parent.location.reload(true);
}
},
beforeShow: function() {
if ($.browser.msie)
$('.fancybox-wrap').css('visibility', 'hidden');
else
$('.fancybox-wrap').css('margin-top', '-99999px');
},
afterShow: function () {
if ($.browser.msie) {
$('.fancybox-wrap').hide();
$('.fancybox-wrap').css('visibility', 'visible');
}
},
beforeLoad: function () {
$(document.body).append('<iframe id="iframeContentLoader" style="position:fixed;z-index:-1;top:-99999px;"></iframe>');
$('#iframeContentLoader').attr('src', $(this).attr('href') + '&oc=false');
$('#iframeContentLoader').load(function() {
$.fancybox.hideLoading();
if ($.browser.msie)
$('.fancybox-wrap').fadeIn();
else
$('.fancybox-wrap').css('margin-top', '0');
$(this).remove();
});
},
afterLoad: function () {
$.fancybox.reposition();
$.fancybox.showLoading();
},
helpers : {
overlay : {
closeClick: true
}
}
}).click();
});
});
另一位开发人员也对新问题发表了以下评论：
我们看到 fancybox:62 有问题。下面的代码块存在于 fancybox.jsp。（突出显示的行得到错误）
head.ready(function(){
$(function(){
if(width != null && height != null &&
width != 'null' && height != 'null'){
var fancyboxIframe =
parent.parent.$('.fancybox-iframe');
fancyboxIframe.width(width);
fancyboxIframe.height(height);
parent.parent.$.fancybox.reposition();
}
});
});
谢谢你。
我们认为 parent.parent.$('.fancybox-iframe'); 出现错误，并且无法设置 fancyboxIframe 的宽度和高度。您能否为此提供解决方案？