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 の幅と高さを設定できません。これを修正してください。