I am making an angular app that requires to create a document, open it in a new tab and print a section. I have already achieved this.
The problem is my client want to continue interacting with the app while the print window is still open.
But I have noticed that when this print window is open, the app like it freezes, all click events no longer work until you close this window.
I have tried a few solutions provided here on Stack Overflow but none really works. In one case I tried setTimeout().
Here is my html code:
<!-- Print button-->
<div class="footer-share" (click)="print()">
<button class="btn btn-back"><span class="mdi mdi-printer"></span><span> Drucken</span></button>
</div>
And here is the funtion in my ts file:
print() {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>XYZ Records</title>
<style type="text/css" media="print">
#page { size: landscape; }
</style>
<style>${printStyles}</style>
</head>
<body onload="window.print();window.close()">${printContents}
<h2>This is the end!
</h2>
<img src="/assets/images/tempton-logo.png" style="width:60%;padding-top:0%;" alt="homepage" class="dark-logo" />
</body>
</html>`
);
popupWin.document.close();
}
What can I change to make it possible for the user to continue interacting with the app when the print tab is still open?
Remove the html property and value for onload in .write() method. Then, remove the close method directly after the write method use this instead:
popupWin.focus();
popupWin.print();
popupWin.close();
Try to do what was suggested in this other question, it worked for me.
https://stackoverflow.com/a/62808575/7912859
According to the documentation: (https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Window_features) window.open() currently supports features. Hence we can pass noreferrer or noopener as shown below, which does not freeze or block the parent window.
window.open(hostUrl, '_blank', 'noreferrer')
Related
I know how to open Multiple Tabs using JavaScript but my solution does not seem not to work on "Bing for mobile".
I'm trying to achieve the following.
Whenever a user clicks on the Call Now button, a call to specified number should be made and the page should redirect to some other page.
For this, the sample code I used is,
<a id="makeCall" onclick="callNRedirect()"> <!-- Target blank, if you want to open in new tab -->
<img alt="Call icon" src="https://static.wixstatic.com/media/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png/v1/fill/w_354,h_212,al_c,usm_0.66_1.00_0.01/14e16f_9f3a8d8153914af3b9ee7c1bb7218506~mv2.png" style="width: 170px;" />
</a>
<script type="text/javascript">
let callNRedirect = function(){
makeCall().then(function() {
window.top.location.href = 'http://www.business-insurance-now.com/call2';
});
}
async function makeCall() {
window.open("tel:989898", “_blank”);
}
</script>
The thing is, it is working fine on Webkit based browsers, but Bing for mobile and Microsoft Edge are not working as expected.
Live link for the demo: https://codestroke.blogspot.com/2018/10/samples-samples-everywhere.html
The Bing app won't open the dial app.
The Edge app won't redirect to the page.
Update: Looks like the Edge was blocking the redirection, so it is kinda solved. Not sure of bing though!
Below is a simple example to open 2 links using HREF.
<a href="http://Microsoft.com" onclick="window.open('http://Bing.com');
return true;">multiopen</a>
If you want to open more then 2 links then you can try to refer example below.
<!DOCTYPE html>
<head>
<script>
function demo()
{
window.open('http://yahoo.com');
window.open('http://bing.com');
window.open('http://microsoft.com');
};
</script>
</head>
<body>
multiopen
</body>
</html>
I have a .Net application that dynamically creates a small HTML page and pops it up in a new window using the javascript document.open method. Everything with that functionality is working fine.
Now I want to add a button to the HTML page that prints the page. I have tried using the following code to no avail:
<a href='print.html' onClick='window.print();return false;'>
<img src='images/printer.png' height='32px' width='32px'></a>
When the button is clicked in the popup window, nothing happens. But when the source code of of this page is saved and loaded in a browser as a separate page, the print button works perfectly. So it would appear that the problem is caused by the fact that the code is in a popup window. [The problem now appears to be that the code in written to the popup window after it is opened.] Does anyone know a way to fix this problem or any alternatives?
EDIT:
Other method that I have tried with the same results:
<input type='button' onclick='window.print()' value='Print' />
and
<a href='javascript:window.print()'>
<img src='images/printer.png' height='32px' width='32px'></a>
EDIT AGAIN:
The above code works in Firefox, but not in IE7. Any ideas on a work around for IE?
EDIT YET AGAIN:
Here is a test case using the code that npup posted below. Instead of the code for the popup window living in a separate html file, I am opening a blank url and then writing the code to it. This step appears to be what is causing the problem.
<html>
<head>
<title>main</title>
</head>
<body>
<h1>
Pop & print</h1>
<button onclick="pop();">
Pop</button>
<script type="text/javascript">
var POP;
function pop() {
var newWin = window.open('', 'thePopup', 'width=350,height=350');
newWin.document.write("<html><head><title>popup</title></head><body><h1>Pop</h1>" +
"<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
"<img src='images/printer.png' height='32px' width='32px'></a></body></html>");
}
</script>
</body>
</html>
Here is a solution that worked for me:
newWin.document.write( newhtml );
newWin.window.location.reload(); // this is the secret ingredient
newWin.focus(); // not sure if this line is necessary
newWin.print();
I'm not 100% sure why this works but I think it has to do with one of the following: (1) an IE security issue, (2) a scope issue (i.e. after creating a new document, IE is confused about which document to print), or (3) a timing issue - the document is not ready to 'accept' a print command yet. In any case, after the reload the print dialogue appears without a problem.
It might be because you are doing a return false in the onclick event of the anchor tag.
Try this:
<input type="button" onclick="window.print()" value="Print" />
You can try:
<input type="button" onclick="self.print()" value="Print" />
or:
<input type="button" onclick="window.focus();window.print()" value="Print" />
But this might not work in MSIE due to restrictions in Cross-Frame Scripting. The best way to do this, I think, is to put the print button on the main window.
<script language="javascript">
var winref = window.open('print.html','windowName','width=400,height=400');
</script>
<form>
<input type="button" value="Print Popup" onclick="if (window.print) winref.print()">
</form>
There must be something more to it than the code shown. I think it works fine (been testing some now).
Here's a miniscule test case. Try it in your setup and see what happens! My checking was under Windows Vista, IE7 and IE8.
main.html:
<html>
<head>
<title>main</title>
</head>
<body>
<h1>Pop & print</h1>
<button onclick="pop();">Pop</button>
<script type="text/javascript">
var POP;
function pop() {
POP = window.open('popup.html', 'thePopup', 'width=350,height=350');
}
</script>
</body>
</html>
popup.html:
<html>
<head>
<title>popup</title>
</head>
<body>
<h1>Pop</h1>
<p>Print me</p>
<a href="print.html" onclick="window.print();return false;">
<img src="images/printer.png" height="32px" width="32px">
</a>
</body>
</html>
I have solved the problem by creating a blank HTML page with the standard HTML markup. I then added the content by creating a new DOM element and editing the innerHTML. The resulting code is the same as in the example, simply replacing the newWin.document.write command with the following:
var newDiv = newWin.document.createElement( 'div' );
newDiv.innerHTML = "<h1>Pop</h1>" +
"<p>Print me</p><a href='print.html' onclick='window.print();return false;'>" +
"<img src='images/printer.png' height='32px' width='32px'></a>"
newWin.document.body.appendChild(newDiv);
While the issue has been resolved, I am honestly not sure what was the exact cause of the problem. If anyone has any ideas, I would be glad to hear them.
You forgot the:
newWin.document.close();
Document must be closed before msie can print it.
This works in Chrome:
<body ><img src="image.jpg" alt="" style="display: block; width: 100%; height: 100%;">
<script type="text/javascript">
window.onload = function() {
window.print();
setTimeout(function() {
window.close();
}, 1);
};
</script>
</body>
If you want to print what's in the window you opened from, i suggest you use
window.opener.print();
in the popup.
I wanted to create a printer friendly version of a page that then automatically printed, this is what I came up with, seems to work great for me!
function printPage(){
var w = window.open();
var headers = $("#headers").html();
var field= $("#field1").html();
var field2= $("#field2").html();
var html = "<!DOCTYPE HTML>";
html += '<html lang="en-us">';
html += '<head><style></style></head>';
html += "<body>";
//check to see if they are null so "undefined" doesnt print on the page. <br>s optional, just to give space
//This allows you to reuse this on lots of pages with the same template
if(headers != null) html += headers + "<br/><br/>";
if(field != null) html += field + "<br/><br/>";
if(field2 != null) html += field2 + "<br/><br/>";
html += "</body>";
w.document.write(html);
w.window.print();
w.document.close();
};
I am calling the Javascript window.open() function to load another url in a pop up window.
When the users closes the popup window, I want the MyThanks() function to be called. How I can do this?
My Script :
<!DOCTYPE html>
<html>
<head>
<script>
function openWin(){
myWindow=window.open('http://facebook.com/ekwebhost','','width=600,height=400,left=200');
myWindow.focus();
}
function MyThanks(){
alert("Thanks");
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>
Regarding usage of popups:
Are you aware that Facebook & Twitter still use popup windows for user like & follow. Go to http://www.ekwebhost.com and click the Facebook "Like" button or the Twitter "Follow" button. Why can't I use popup windows for my own needs?
function openWin(){
myWindow=window.open('http://facebook.com/ekwebhost','','width=600,height=400,left=200');
// Add this event listener; the function will be called when the window closes
myWindow.onbeforeunload = function(){ alert("Thanks");};
myWindow.focus();
}
Try this!
You can swap out the function(){ alert("Thanks");}; for MyThanks to call your function.
The new window that you open will have an attribute called opener that references the Window object that created it. You can then call functions on the parent window by calling window.opener.MyThanks();
Popup:
<script type="text/javascript">
function closePopup() {
window.opener.MyThanks();
window.close();
}
</script>
<div>
<h1>My Popup</h1>
<!-- Form or info to display -->
<button onclick="closePopup();">Close</button>
</div>
While there is nothing inherently wrong with browser popup windows, they can be annoying since the user can lose them behind other windows. Also, it takes their focus off of your page to do something else. The application that I currently develop is trying to move all of our popup windows to Javascript dialogs. It gets pretty annoying for users once you get 3 popups deep.
There are a bunch of ways to create dialogs within your webpage. jQuery UI is one library that I like.
You can try this:
<script>
function openWin() {
myWindow = window.open('http://facebook.com/ekwebhost', '', 'width=600,height=400,left=200');
myWindow.focus();
MyThanks();
}
function MyThanks() {
alert("Thanks");
}
</script>
I have a div with id target_wrapper.
<div id="target_warpper">
<div id="target">
///Some content here
</div>
</div>
And the corresponding javascript function to print the page is :
<div class="print_list">
Print
</div>
<script type="text/javascript">
function PrintContent()
{
var DocumentContainer = document.getElementById('target_warpper');
var WindowObject = window.open('', 'PrintWindow', 'width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes');
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
WindowObject.document.writeln('<link rel="stylesheet" type="text/css" href="css/print.css">');
WindowObject.document.writeln('</head><body>')
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>
But when I click on the Print link, the page that appears does not contain the css css/print/css I have included.
NB: When I click on the view page source for the print pop up window, it shows blank!
Here is an example showing this code working in a jsFiddle. I included jQuery just to make the event bind on the click a little easier.
When you comment out the print() & close() - its a lot easier to check what happens. In that example, I appear to get exactly what you want. New window, correct content, link tag with the right href attribute.
If you are having trouble with the css file, double check the file path. To be easier, you should probably just specify the full url for the css file: http://example.com/css/print.css.
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.