javascript 在新窗口中打开一个新页面，打印并关闭它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24017897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open a new page in a new window, print it and closed it
提问by Andre
I still can't get this code to work, I am trying to use the "onClick" to swap the image once clicked, open this new page in a new window, print this new opened window and closed it. It opens the new page on the new window, but it prints a blank page and it cant close it, it seems that the focus is not been set somehow. Can any one help me on tis? Thanks!
我仍然无法让这段代码工作，我试图使用“onClick”来交换点击后的图像，在新窗口中打开这个新页面，打印这个新打开的窗口并关闭它。它在新窗口上打开新页面，但它打印了一个空白页面并且无法关闭它，似乎没有以某种方式设置焦点。有人可以帮我解决这个问题吗？谢谢！
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print it</title>
<!--style type="text/css" media="print"> .noprint {visibility: hidden;} </style-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<script type="text/javascript">
// <!--
Popup = {
init : function () {
$('a.action_print').bind('click', Popup.printIt);
},
printIt : function () {
var win = window.open('doc1.html','Printed','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250');
if (win) {
win.document.close();
win.focus();
win.print();
}
return false;
}
}
$(document).ready(function () {
Popup.init();
});
// -->
</script>
</head>
<body>
<br>
CLick to Print:<br><br>
<p style=" padding: 125px 0; text-align: center;">
<a class="action_print" target="Printed"><img src="images/cam_off.png" class="img-swap" width="100" height="100" /></a>
</p>
</body>
</html>
Thanks for looking!
感谢您的关注！
回答by Andre
I figured it out, all works, I just had to make sure that my files I am printing leave in the same domain. I hope it can help others in need for such a thing, but any improvements on the code are welcome.
我想通了，一切正常，我只需要确保我正在打印的文件留在同一个域中。我希望它可以帮助其他有需要的人，但欢迎对代码进行任何改进。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Open n Print</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
function openPrintWindow(url, name, specs) {
var printWindow = window.open(url, name, specs);
var printAndClose = function () {
if (printWindow.document.readyState == 'complete') {
clearInterval(sched);
printWindow.print();
printWindow.close();
}
}
var sched = setInterval(printAndClose, 200);
};
jQuery(document).ready(function ($) {
$(".test").on("click", function (e) {
var myUrl = $(this).attr('data-url');
alert(myUrl);
e.preventDefault();
openPrintWindow(myUrl, "to_print", "width=700,height=400,_blank");
});
});
});//]]>
</script>
</head>
<body>
</br>
<a class="test" href="javascript:;" data-url= "doc.html">open print and close doc</a>
<br />
</body>
</html>
回答by Teemu
The printItlooks weird. At first you close the document, then try to print the content. Try this:
在printIt看起来怪怪的。首先关闭document，然后尝试打印内容。试试这个：
if (win) {
win.focus();
win.print();
win.close();
}
Closing documentwon't close window, hence win.close(). Notice also the line order.
关闭document不会关闭window，因此win.close()。还要注意行顺序。
Also, jQuery 1.4 is quite old, have you considered to update to a newer version?
另外，jQuery 1.4 已经很老了，您是否考虑过更新到新版本？
回答by Sheryar Nizar
You may put your javascript/JQuery code in the place where I put the window.print();
你可以把你的 javascript/JQuery 代码放在我放 window.print(); 的地方。
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg", "window.print();", true);
回答by Joop Stringer
To let the full content of the window load properly, change the
要让窗口的全部内容正确加载，请更改
printWindow.close()
printWindow.close()
to
到
printWindow.onfocus=function(){ printWindow.close();}
