[英]Modal Dialog JQuery IE 9-11 Print Issue
我正在尝试将大型的旧IE 8系统转换为当前的浏览器。 我要修复的问题之一是showModalDialog,因为它自37以来在Chrome上不起作用,并且变得过时了。
我正在使用的方法是:
http://extremedev.blogspot.co.uk/2011/03/windowshowmodaldialog-cross-browser-new.html
$.showCustomModal = function(options) {
var defaultOptns = {
url: null,
dialogArguments: null,
height: 'auto',
width: 'auto',
frameWidth:'100%',
position: 'center',
resizable: false,
scrollable: false,
onClose: function() {enableScrolling();},
returnValue: null,
doPostBackAfterCloseCallback: false,
postBackElementId: null
};
var fns = {
close: function() {
enableScrolling();
//opts.returnValue = $dialog.returnValue;
opts.returnValue = $frame[0].contentWindow.window.returnValue;
$dialog = null;
opts.onClose();
if (opts.doPostBackAfterCloseCallback) {
postBackForm(opts.postBackElementId);
}
}
//, adjustWidth: function() { $frame.css("width", "100%"); }
};
// build main options before element iteration
var opts = $.extend({}, defaultOptns, options);
var $frame = $('<iframe id="iframeDialog" name="iframeDialog" />');
if (opts.scrollable){
$frame.css('overflow', 'auto');
}else{
disableScrolling();
}
if (opts.width!= '100%' && opts.width!= 'auto'){
opts.frameWidth = opts.width;
opts.width+=7;
}
console.log("width "+opts.width);
console.log("frameWidth "+opts.frameWidth);
$frame.css({
'padding': 0,
'margin': 0,
'padding-bottom': 10,
});
var $dialogWindow = $frame.dialog({
autoOpen: true,
modal: true,
width: opts.width,
height: opts.height,
resizable: opts.resizable,
position: opts.position,
overlay: {
opacity: 0.5,
background: "black"
},
close: fns.close,
resizeStop: fns.adjustWidth
});
$frame.attr('src', opts.url);
//fns.adjustWidth();
$frame.load(function() {
if ($dialogWindow) {
var maxTitleLength = 50;
var title = $(this).contents().find("title").html();
if (title.length > maxTitleLength) {
title = title.substring(0, maxTitleLength) + '...';
}
$dialogWindow.dialog('option', 'title', title);
}
});
$frame.css('width', opts.frameWidth);
$dialog = new Object();
$dialog.dialogArguments = opts.dialogArguments;
$dialog.dialogWindow = $dialogWindow;
$dialog.returnValue = null;
}
function postBackForm(targetElementId) {
var theform;
theform = document.forms[0];
theform.__EVENTTARGET.value = targetElementId;
theform.__EVENTARGUMENT.value = "";
theform.submit();
}
var prntWindow = getParentWindowWithDialog(); //$(top)[0];
var $dlg = prntWindow && prntWindow.$dialog;
function getParentWindowWithDialog() {
var p = window.parent;
var previousParent = p;
while (p != null) {
if ($(p.document).find('#iframeDialog').length) return p;
p = p.parent;
if (previousParent == p) return null;
// save previous parent
previousParent = p;
}
return null;
}
function setWindowReturnValue(value) {
if ($dlg) $dlg.returnValue = value;
window.returnValue = value; // in case popup is called using showModalDialog
}
function getWindowReturnValue() {
// in case popup is called using showModalDialog
if (!$dlg && window.returnValue != null)
return window.returnValue;
return $dlg && $dlg.returnValue;
}
if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function() { console.log("Close Called"); if ($dlg) $dlg.dialogWindow.dialog('close'); };
function disableScrolling(){
$('html, body').css({'overflow': 'hidden','height': '100%'});
}
function enableScrolling(){
$('html, body').css({'overflow': 'auto','height': 'auto'});
}
致电:
$.showCustomModal({
url: "/Action/DisplayPage",height: 660,width: 708,
onClose: function(){popupContinue(); }
});
在iframe内装有打印按钮。
我已经在IE 8-11,Firefox,Chrome中对此进行了测试。 iframe的显示在所有浏览器上看起来都是一样的,仅在打印时才会出现此问题。
它们似乎可以在IE 8,Chrome,Firefox上正确打印。 但是在IE9-11上,页面似乎缩放错误。
图像尺寸缩小,字体全部缩小。 我似乎在打印时使用的宽度大于iframe的宽度,例如当我添加650px的固定宽度时。 每侧留有大约300px的空白。 当我在打印前检查机身和iframe的宽度时,一切似乎都正确。
欢迎使用任何有助于解决此问题的解决方案。
弄清楚了。
IE 9+似乎不喜欢在其内部打印iframe。
所以我做了。
function customModalPrint(iframeId) {
var iframe = parent.$('#'+iframeId)[0];
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
try {
iframe.contentWindow.document.execCommand('print', false, null);
} catch(e) {
iframe.contentWindow.printPage();
}
}else{
print();
}
parent.$("#"+iframeId).dialog('close');
}
这迫使IE使用iframe.contentWindow.document.execCommand 。 这是使其正确打印的主要因素。 每个其他浏览器都可以使用打印,因为它们能够处理iframe中的打印。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.