I have a mother page, where is jvscrpt function called openWin() , which opens a new window.
Here is my code:
<html>
<head>
<script type="text/javascript">
function openWin()
{
win=window.open();
win.document.write("<html>");
win.document.write("<head>");
win.document.write("<style type=\"text/css\">");
win.document.write("#media print{.input {display:none}}");
win.document.write("</style>");
win.document.write("</head>");
win.document.write("<body>");
win.document.write("<table align=\"center\">");
win.document.write("<tr><td>result:</td><td>100,--€</td></tr>");
win.document.write("<tr><td colspan=\"2\" id=\"idcko\"><input type=\"button\" value=\"click\" class=\"input\" onclick=\"window.print();\"/></td></tr>");
win.document.write("</table>");
win.document.write("</body>");
win.document.write("</html>");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="openWin();" />
</form>
</body>
</html>
When I click on button "Click me!" a new window appears, but browser can`t stop loading the page.The page has full functionality,but for example when I want to see source code in Mozilla, I get only a blank page.
Please help...
call
win.document.close();
At the end(after the last write() )
It signals to the browser that the write-process is finished and the document is complete.
but for example when I want to see
source code in Mozilla, I get only a
blank page.
This is because the source was written by your javascript - this is the same as AJAX (you can't view the changes in the source).
Perhaps you would be better of just opening a new page and pass whatever paramters it needs either via a GET/POST or server-side.
Related
I have a PHP web page. On the web page i have a iframe and few DIV. Now I want a single print button, which will print the content of the current active window. If no iframe or div is open then it will print the main page else the current iframe source or div content using javascript.
is it possible?
Here is an sample to print an element. Hope this will help you to get an idea.
<html>
<head>
<input type="button" value="Click to Print" onclick="printDiv()" />
<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js">
</script>
<script type="text/javascript">
function printDiv() {
var data = $('#divToPrint').html()
var printWin = window.open('', 'Print Preview', 'height=600,width=800');
printWin.document.write('<html><head><title>Print Preview</title>');
printWin.document.write('</head><body >');
printWin.document.write(data);
printWin.document.write('</body></html>');
printWin.print();
printWin.close();
return true;
}
</script>
</head>
<body>
<div id="divToPrint">jQuery is a fast, small, and feature-rich
JavaScript library. It makes things like HTML document traversal and
manipulation, event handling, animation, and Ajax much simpler with an
easy-to-use API that works across a multitude of browsers.</div>
</body>
</html>
The data variable should be replaced with what ever that you want to print.
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
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.
I have a lightbox plugin that required additional option - print the image.
So I did a little JS function that print that image as follow:
var headstr="<!DOCUMENT html><html xmlns='http://www.w3.org/1999/xhtml'><head><title></title></head><body>";
var footstr="</body>";
var newstr="<img src=\"[img-location]\" alt='courses' />";
document.body.innerHTML=headstr+newstr+footstr;
window.print();
window.location.reload();
The problem is that when the user press on the print button, in chrome it opens a new window (chrome print page) and in it, it says - print preview failed. In firefox and IE8 it works just fine...
I don't know if this is what caused your failure, but if window.print() is called from an <input type="submit"> within a form with method="post" (i.e. every asp.net page ever) then Chrome print preview wigs out.
The solution to this is to add return false; after window.print() so that the page doesn't post back.
<html>
<head>
</head>
<body>
<form method="post" action="test.html">
<p>This is only a test. Had this been a real emergency....</p>
<!--This doesn't work -->
<!-- <input type="submit" onclick="JavaScript:window.print();">-->
<!--But this does -->
<input type="submit" onclick="JavaScript:window.print();return false;">
</form>
</body>
</html>
I'm not sure if this is the problem, but you're creating invalid html. For one, you don't close the <html> tag. In addition, you're putting an html and head tag within your body.
Let'u start with following example:
Create three pages in same directory:
test.html
index.html
Your test.html:
<html>
<head>
<script>
function test()
{
alert('Going to google.com?');
window.location="http://google.com";
}
</script>
</head>
<body>
google.com<br/>
<input type="button" value="google" onclick="test();" />
google.com<br/>
</body>
</html>
Now check test.html page on IE as well as firefox or crome.
You will notice following points:
Button works perfectly.
First hyperlink works differently in IE and other browser. In IE, it brings us back to index.html page, while in firefox, it stays on same page.
For first hyperlink, window.location fails.
Second hyperlink you cannot click on that, as mouse over event will fire first, and it works perfectly!
Why?
My major interest is on 3rd point, as it even gives us alert, window.location fails.
The JavaScript event fires, window.location is set, then the default action of the link fires and the browser goes to '', which (IIRC) resolves as the current URI.
This is the same effect you get if you click on a link, then quickly click on a different link. The browser doesn't have time to go to the first one before receiving the instruction to go to the second one, and it goes to the second one. If you delay the return of the function (by putting the alert second) it gives enough time for the request for the first URL to go through for that one to be visited instead of the second.
You would need to cancel the default action which, when you're using intrinsic event attributes (not recommended, unobtrusive JavaScript is the way forward), is done by returning false.
onclick="test(); return false;"
Try this:
<html>
<head>
<script>
function test()
{
alert('Going to google.com?');
window.location="http://google.com";
return false;
}
</script>
</head>
<body>
google.com<br/>
<input type="button" value="google" onclick="Javascript:return test();" />
google.com<br/>
</body>
</html>