I have a div that contains text to be printed on external printers.
<div id="school">
<p>Who loves school?</p>
<img onClick=clickMe(1) src='clickImage.png' />
</div>
Below is the javascript that handles the click of the above image button and initiates a printing dialog,
function clickMe(id) {
const printContents = document.getElementById(id).innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
The above javascript prints the div successfully, but with only 1 problem. After the print dialog exits, the image button stops responding to clicks until the page is refreshed.
Ideal behavior would be the button responding on each click without the need to refresh the page.
What am I missing?
Related
I'm trying to print a section of the page which a form with values. I'm using window.print();
It's working perfectly fine in Mozilla, but in Chrome and Edge it has problems.
The problem is, in the beginning it prints the whole page, and second time it prints the desired section. 3rd time again full page and 4th time again the section. What's wrong?
How I see it in Mozilla
How I see it in chrome
var printContents = document.getElementById('form-sectionResilience2').innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents; // I need to add this line to return page to its orginal position
new location hash doesn't output when clicking on link.
I am at a loss understanding why the browser doesn't output the updated variable.
<html>
<body>
<p></p>
1
2
</body>
<script>
var p = document.querySelector('p');
p.innerHTML = location.hash;
</script>
</html>
When I click on the first link, the address in the browser changes to #2019-01, but p.innerHTML displays nothing.
I expected it to display #2019-01.
If I hit crtl r, to reload the page, then p.innerHTML displays #2019-01.
Why do I have to force a reload to get the output?
Is there a way to get the updated location.hash value without reloading the page?
I would recommend you create a showHash function and then call it immediate when the page loads. Additionally, you can add an event listener to window.onhashchange to call the showHash function any time the hash changes.
showHash();
function showHash() {
var p = document.querySelector('p');
p.innerHTML = location.hash;
}
window.onhashchange = showHash;
<html>
<body>
<p></p>
1
2
</body>
</html>
I am trying to print an image from inside a div, the code runs ok but when the print dialog pops up, I would like the page to stay the same while actually it is showing only the picture as the window.reload doesn't work for some reasons. The javascript is telling me in console "Uncaught TypeError: window.reload is not a function"but i don't understand why.
function printDiv(printableArea) {
var printContents = document.getElementById("printableArea").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
window.close();
window.reload();
}
Click to print
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
The reason you are getting the error is that there is no window.reload() method. You might want to use location.reload() to reload the page instead.
Not sure if there's such function, Try location.reload()
details
use location.reload(); or window.location.reload(true);
https://webplatform.github.io/docs/apis/location/reload/
Using JavaScript, how do I create a print all button?
The 'Print All' button whenever clicked would iterate through an iFrame's different src's and print the content.
As a note, the iFrame is currently setup on a main webpage. There are navigation buttons to change the content src of the iFrame. This main webpage is set up to resemble navigating through slide content with navigation buttons. The navigation buttons are really navigating to different webpages.
So, I'm guessing that the content would need to be appended to a document or arrayed so that the content could then be printed all at once with the 'Print All' button.
I was successful at printing a 'Current Slide' (or iFrame content) with the following code:
function PrintCurrentSlide()
{
var el = document.getElementById('ifMain');
el.contentWindow.focus();
el.contentWindow.print();
return;
}
Now, I'm searching for an answer to navigate through the iFrame src's to print content with just one click.
Try this in your script
window.onload=function() {
window.frames["printf"].focus();
window.frames["printf"].print();
}
function print() {
var newWin = window.frames['printf'];
newWin.document.write('<body onload=window.print()>This is a new page I inserted</body>');
newWin.document.close();
}
function change(){
var url="http://www.apple.com/";
var $iframe = $('#ifrm');
if ( $iframe.length ) {
$iframe.attr('src',url);
return false;
}
return true;
}
and in HTML
<input type="button" onclick="print()" value="Test print"/>
<button onclick="change()">next</button>
<iframe id="printf" name="printf" src="dfgdf.html"></iframe>
here put your pages dynamically and get printed. use your logic to get print automatically or in single click or whatever
I came up with a way around it.
With this you get only one print dialogue box.
The aim is to get the contents of all the iframes into the parent window by manipulating the DOM using javascript.
Here is the code:
<script>
pages =[] // initiate an empty list here
function printPage() {
var frames = document.getElementsByTagName('iframe');
// get all the iframes and loop over them
// then push their innerHTML into the list
for (var i = 0; i < frames.length; i++){
pages.push(frames[i].contentWindow.document.body.innerHTML);
;
}
if (pages && pages.length) {
// this if statement, just checks to ensure our list is not empty before running the code.
// here is the magic, we now set the parent window to be equal to all the concatenated iframes innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
}
else {
// do nothing
}
}
with this solution you even avoid the problem of the iframe being cut off if it exceeds one page.
Remember that in your parent page HTML you will have the code below to call the printPage function.
<input type="submit" value="Print All"
onclick="javascript:printPage()"
/>
Hello I am using the following javascript code to print a div layer from a webpage. Is there a way that this can be modified to print this div from from another page (for example print.php) not the one that is open in the moment ?
<script>function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
} </script>
and the link to make it work is: <a href="#" onclick="printDiv('printableArea')">
I think you are asking whether it's possible to print a DIV in another page.
If this is the question ,it is possible given these two page have some relation,so that the other page can get reference of the content page.
For example , print.php opens the content page by using window.open. Or , print.php is the parent page of the content page.