Javascript: Issue with window.print - javascript

In recent update of browsers, (firefox 95+) Something weired happened.
Scenario:
- user clicks the print button in main page
- user will be redirected to a new page (print page)
- when the page fully loaded, the window.print() function executes
- when the print dialog dismissed, user will be redirected to main page
So for example, I wrote this html code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
test
<script language="javascript">
window.print();
console.log('1');
</script>
</body>
</html>
As this page describes, The window.print() method will block while the print dialog is open. And its true. unless you have more script lines after that.
Opened an issue here and yet, the problem seems unsolved to me.
if you paste
window.print();
console.log('1');
directly into browser console, it works as it intended.
Any advise?

This works for me in current Safari and Chrome. The console log is executed after the print dialog is dismissed.
window.onafterprint = event => {
console.log('after print');
};
window.print();

Related

When you open the Alert window in the Popup window, the popup window disappears

For IE11.
If you open the alert window in the popup window of A, the popup window disappears once, and when you check again, the popup window appears.
For other browsers (Chrome, FF, Edge), the alert appears in the popup window.
I wonder if there is a solution.
Can't reproduce the problem on my side. According to your description, I create a sample using the following sample code, it seems that everything works well:
code in main page:
<button onclick="myFunction()">Open new window</button>
<script>
function myFunction() {
window.open("popuppage.html","_blank","wight=900px, height=600px")
}
</script>
code in popuppage.html:
<head>
<meta charset="utf-8" />
<title></title>
<script>
function myfunction() {
alert("Hello");
}
</script>
</head>
<body>
<a id="btnshowalert" href="#" onclick="return myfunction();" > show alert</a>
</body>
The result as below:
Please try to clear IE browser cache and history, then create a new page to test above code or re-test your code. If still not working, you could try to reset Internet Explorer settings and share your code.

I want to do function at open Chrome with web site Javascript

I'm new at Javascript and I have a question.
I want to at start if I open Chrome and web site to do my function.
I want to every time do this function if I open Google Chrome!
I have adblock, and I want if every time I open this web site how2play.pl I want to delete this window scr.hu/0qbal/i9wa2 with code scr.hu/0qbal/gs9sy like in console paste document.getElementById('sdf09-8e9daf9e854f26f98cabf235ad8343cb').style.display = "none";
Please explain step by step.
<!doctype html>
<html>
<head>
<title>Testing</title>
</head>
<body>
<script type="text/javascript">
window.onload = function()
{
alertme('this works');
};
function alertme(text)
{
alert(text);
}
</script>
<button onclick="alertme('you clicked me');">Click Me</button>
</body>
</html>
When the page is done loading or if you click on the button, the code will run a javascript function that will display an alert box.
How it works
In the javascript there is a window.onload = function() -- which allows you to run any function you want immediately when the page is done loading (in this example it will run the alertme('this works');)
When you look at the button you will see that the button contains alertme('you clicked me');
That is also a function that executes when the button is clicked.

While printing the page using Window.print() the page is printed with small font size in IE11 but its prints well in Chrome and Mozilla

I have a button Which prints the Page on click of a button which triggers onclick(); javascript function. the code goes like this.
<html>
<input type="submit" value="Print" onclick="printInfo()">
</html>
Script is placed in <head> tag
<script type="text/javascript">
function printInfo()
{
window.print();
}
</script>
when we click on the button in Chrome and Mozilla the page is printed normally but in IE the font decreases and is set to half of the page.
Please help me on how to maintain consistent in IE and Chrome.

javascript print() method is not working as expected

I have a simple HTML code to print the page. Below is the code:
<!DOCTYPE html>
<html>
<head>
<script>
function printPage()
{
var w = window.open("http://www.sigmaaldrich.com/catalog/CofADocRequest.do?symbol=209104&LotNo=MKBP0842V&brandTest=SIGMA","_self");
window.focus();
window.print();
}
</script>
</head>
<body >
<input type="button" onclick="printPage()" value="print a div!" />
</body>
</html>
What the code does is, it displays a button, on clicking that button it calls a function. The function uses open() to open a new URL in the same page by using the “_self ” parameter.
As we can see in the code, the print() is being called after the call to open method. But in my browser IE11, the print pop is being shown befor loading the page.
Due to this I am not printing the correct page.
Can anybody help me on this.
The problem is that window refers to the current window, which is the original.
By opening a new window in self you replace the page, this is basically a redirect.
And if you open it via popup and print it as w.print() than you run into cross-origin security error.
You could use iframe to this with a proxy as shown here
How do print specific content inside the iframe
and
here
How do print specific content inside the iframe

Javascript print div not working in Safari

I have a Javascript function that prints the contents of two elements in a webpage. It works in Chrome, Firefox and IE but Safari just brings up an empty window and if I select print, it simply prints a blank page.
Here's my code:
var content = "<!doctype html><html><head>";
content += '<link rel="stylesheet" href="/css/normalise.css" type="text/css" />';
content += '<link rel="stylesheet" href="/App_Themes/CS2011/StyleSheet.css" type="text/css" />';
content += "</head><body>";
//Find the div to insert the rest of the html after
var contractToFind = $(divElement).parent().find("div").get(0);
//Insert rest of code
content += contractToFind.innerHTML;
content += "</body></html>";
//Set up print window and print
var printWindow = window.open('', '', params);
printWindow.document.write(content);
printWindow.document.close();
printWindow.focus();
printWindow.print();
//Close the window
printWindow.close();
Is there a way I can modify my code to allow it to render the page properly in Safari so I can print it? Preferably without using additional plugins.
Edit: Thanks Eric but that didn't work for me. Adding a time delay to the print seems to work well although it's not ideal, even a 10ms delay solves the issue. The line I used was:
setTimeout(this.print, 100);
I found a solution to this problem. The problem resides in the fact that window.print() is not standard for all browser and Safari probably takes a different approach on when triggering it.
I changed a little your code so maybe this solution can't fit your possibility but it works for all browser (tested on Safari, FF, Chrome, IE8).
Note that you need to have a different page for the popup content (I changed the code to retrieve the contract to make a sample for myself, hope you will figure out how to get contract content).
The code:
HTML for the page that opens the popup
<body>
<input type="button" id="popup" value="Open Popup" />
<div id="yourContract">
<div>blablabla</div>
<div>blablabla2</div>
<div>blablabla3</div>
<table>
<tr>
<td>blablabla td1</td>
<td>blablabla td2</td>
</tr>
<tr>
<td>blablabla td3</td>
<td>blablabla td4</td>
</tr>
</table>
</div>
</body>
<script>
$("#popup").click(function(){
var win = window.open("static.html");
});
</script>
HTML for the popup (static.html):
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$.holdReady(true);
$.getScript("print.js", function() {
$.holdReady(false);
});
</script>
</head>
<body>
<script>
var contract = window.opener.$("#yourContract").html(); //change to fit your needs
$("body").html(contract);
</script>
</body>
</html>
JS file (print.js) called by static.html
$(document).ready(function(){
window.print();
window.close();
});
How does it works:
static.html consists of two script section. The section in the body loads via javascript the content in the page.
The section in the head prevent the document to trigger ready status by setting holdReady to true. Then it loads print.js which waits for document to be ready, but we will decide the exact moment because we are preventing it.
After the script is included in the page holdReady is set again to false, triggering the ready status to document and calling the print() and close() functions on the window.
This however occurs after the browser has loaded all the page content, so you will see the preview in the popup page and the print dialog.
Hope this solution is what you need.

Categories

Resources