iframe print not working in Chrome when url starts with https
I need to print the page without using window.open and window.print functions.
I achieved the same using the code below. This works if the url doesn't start with https (at least what I thought). If the url starts with https, chrome prints out a blank page. Sometimes, clicking multiple times to print a link will display page data. This code works fine in IE and FireFox.
I uploaded a sample test page with this code below the url.
http://mediateqindia.com/testPrint.html (works fine)
https://mediateqindia.com/testPrint.html (click on the blank page on the print link)
Both links point to the same page.
How can I fix this to start using https in chrome?
The code on the testPrint.html page is given below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bindddddddddd</title>
</head>
<body>
<div id="testPrintDiv" >
Hiiiiiiiiiiiiiii
<br /><br />
Hellooooooooooooo
<br /><br />
World !!!!!!!!!!!!!!!!!!!!!!!!!!!s
<a href="javascript:printTest();">Print</a>
</div>
</body>
</html>
<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){
scale=".9";
}
var printframe = document.createElement('iframe');
printframe.name = "printframe";
printframe.style.position = "absolute";
printframe.style.top = "-1000000px";
document.body.appendChild(printframe);
var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
frameDoc.document.open();
frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
frameDoc.document.write('<style type="text/css">@media print { body {transform: scale('+scale+');} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
+'</style></head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["printframe"].focus();
window.frames["printframe"].print();
setTimeout(function () {
document.body.removeChild(printframe);
},5000);
}, 750);
//return false;
}
</script>
The problem is the loading time of the css file.
When commenting the line below, everything started working fine.
frameDoc.document.write('<link rel="stylesheet" type="text/css"
href="/user/data/css/styles-min.css">');
The above code works intermittently when increasing the interval specified for the setTimeout function. Since the time it takes to get the css file varies with the server location, I rewrote the code as follows and it works fine now.
<script>
function printTest(){
var scale=1;
var contents=document.getElementById("testPrintDiv").innerHTML;
if(!scale){
scale=".9";
}
var printframe = document.createElement('iframe');
printframe.name = "printframe";
printframe.style.position = "absolute";
printframe.style.top = "-1000000px";
document.body.appendChild(printframe);
var frameDoc = printframe.contentWindow ? printframe.contentWindow : printframe.contentDocument.document ? printframe.contentDocument.document : printframe.contentDocument;
$.when( $.ajax({url:'/user/data/css/styles-min.css',cache:true}) )
.done(function(response) {
frameDoc.document.open();
frameDoc.document.write('<meta http-equiv="X-UA-Compatible" content="IE=edge" /><html><head><title></title>');
frameDoc.document.write('<link rel="stylesheet" type="text/css" href="/user/data/css/styles-min.css">');
frameDoc.document.write('<style type="text/css">@media Print {body {transform:scale('+scale+')}} @page{margin-left: 0cm;} body {margin-left:0;padding:0;}'
+'</style></head><body>');
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["printframe"].focus();
window.frames["printframe"].print();
setTimeout(function () {
document.body.removeChild(printframe);
},1500);
}, 1500);
});
}
</script>