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.
Related
Here is code, stuck with that simple issue which I never have had in past 7 years:
<html>
<body>
<iframe></iframe>
<script>
window.frames[0].document.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
</script>
</body>
</html>
The problem is that browser's spin wheel continue to circle.
Network console shows all loaded.
If I remove iframe from DOM, or add/change #src attribute - loading stops.
I believe the first answer is the better way, but I'll provide a second answer that is almost identical to your code, but shows how calling document.close() would have also solved your issue.
The issue is that you've started writing to the document's <head> element in the iFrame, but not finished (that's why the page keeps loading). Calling document.close() signals that you've finished writing to the document.
<html>
<body>
<iframe></iframe>
<script>
var doc = window.frames[0].document
doc.write('<scr' + 'ipt type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/scr' + 'ipt>');
doc.close();
</script>
</body>
</html>
Actually, I've just found solution that works if you have control on inner script (doesn't help with loading 3rd party like jQ though).
You should close "current stream" with document.close().
Looks like firefox might have some weirdness around iframes
<html>
<body>
<iframe></iframe>
<script>setTimeout(function(){window.frames[0].document.write("hi");}, 5000);</script>
</body>
</html>
This results in a spinner that starts 5 seconds after page load and doesn't go away (at least on my computer - firefox 47.0)
Try just:
window.frames[0].document.write('<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"><\/script>');
I checked on JSbin and it works ok.
Example page
Update:
I think it cannot work because that iframe doesn't even have any document in it. it's just an empty tag until it has a working src and is populated.
See demo
Anyway, this can only work if the content of the iframe is on the same domain (google "cross-origin iframes"). There is a "race" going on here. you want to load jQuery so the page your are loading would use it, but you cannot load any script from the outside of the iframe to the inside until the page has loaded inside the iframe...
I was able to insert the script without the loading issue you describe by defining and appending the element in Javascript, without any loading issues.
<html>
<body>
<iframe id="myFrame"></iframe>
<script>
var jq = document.createElement('script')
jq.type = 'text/javascript'
jq.src = '//code.jquery.com/jquery-3.0.0.min.js'
document.getElementById('myFrame').contentDocument.getElementsByTagName('body')[0].appendChild(jq);
</script>
</body>
</html>
Of course, changing body to head will change where the script loads in the iFrame.
May use the onload
function populateIFrame() {
const str = `<body></body>`;
const idoc = document.getElementById("demo01")
idoc.contentDocument.write(str)
idoc.close();
}
window.onload=populateIFrame
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 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.
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'm trying to write a web application using the new offline capabilities of HTML5. In this application, I'd like to be able to edit some HTML—a full document, not a fragment—in a <textarea>, press a button and then populate a new browser window (or <iframe>, haven't decided yet) with the HTML found in the <textarea>. The new content is not persisted anywhere except the local client, so setting the source on the window.open call or the src attribute on an <iframe> is not going to work.
I found the following question on StackOverflow: "Putting HTML from the current page into a new window", which got me part of the way there. It seems this technique works well with fragments, but I was unsuccessful in getting an entirely new HTML document loaded. The strange thing is when I view the DOM in Firebug, I see the new HTML—it just doesn't render.
Is it possible to render a generated HTML document in a new window or <iframe>?
EDIT: Here's a "working" example of how I'm attempting to accomplish this:
<!doctype html>
<html>
<head>
<title>Test new DOM</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function runonload() {
return $("#newcode")[0].value;
}
$(function() {
$("#runit").click(function() {
w=window.open("");
$(w.document).ready(function() {
$(w.document).html(w.opener.runonload());
});
});
});
</script>
</head>
<body>
<textarea id="newcode">
<!doctype html>
<html>
<head>
<title>New Page Test</title>
</head>
<body>
<h1>Testing 1 2 3</h1>
</body>
</html>
</textarea>
<br/>
<button id="runit">Run it!</button>
</body>
</html>
I think you are overcomplicating this...
try this:
<SCRIPT LANGUAGE="JavaScript">
function displayHTML(form) {
var inf = form.htmlArea.value;
win = window.open(", ", 'popup', 'toolbar = no, status = no'); win.document.write("" + inf + ""); } // </script>
<form>
<textarea name="htmlArea" cols=60 rows=12> </textarea> <br> <input type="button" value=" Preview HTML (New Window)" onclick="displayHTML(this.form)"> </form>
$(w.document).html(w.opener.runonload());
You can't set innerHTML—or, consequently, jQuery's html()—on a Document object itself.
Even if you could, you wouldn't be able to do it using html(), because that parses the given markup in the context of an element (usually <div>) from the current document. The doctype declaration won't fit/work, putting <html>/<body>/etc inside a <div> is invalid, and trying to insert the elements it creates from the current ownerDocument into a different document should give a WRONG_DOCUMENT_ERR DOMException. (Some browsers let you get away with that bit though.)
This is a case where the old-school way is still the best:
w= window.open('', '_blank');
w.document.write($('#newcode').val());
w.document.close();
Whilst you can inject innerHTML into a pop-up's document.documentElement, if you do it that way you don't get the chance to set a <!DOCTYPE>, which means the page is stuck in nasty old Quirks Mode.