We have a html page having some html content & also one iframe. I need to add a print functionality to print the whole page with the iframe content also.
I have tried window.print() function, but it leaves the iframe contents.
Can anybody suggest me way to print it using javascript?
Cheers!!
Related
I know to hide a div on a website if I have the source control. I can set div display to none or call javascript hide() on the div id. But how can I permanently remove a div from a website for which I don't have a source control. Just for my rendering, if I load or refresh the page, I should see that div gone. Are there any basic work around or hacks for that? I don't want to inspect and set display none for div every time I refresh the website.
Have a look at Tampermonkey for Chrome
or Greasemonkey for Firefox
You might use a (somewhat weird :) construct: build your own HTML document, containing only:
an <iframe src="---your external page--->"
a <script> where you explicitly add style="display: none;" to all elements where you need it
Browser (Chrome in my example) extensions has needed functionality.
You can use Custom JavaScript for websites extension, and configure additional code execution for every page reload without opening DevTools.
I just want to know if there's easy way to create a print dialog for WordPress that outputs on the print dialogue box the actual view of a webpage. P perhaps a full page screenshot might work as long as it has the full page's height.
I tried WP-Screenshot plugin on this page. The plugin outputs a screenshot that can be printed out by adding a print dialogue plugin. However, the the height of the image produced by WP-Screenshot can't be dynamic so I guess I need to find another solution.
I can't find a plugin that has the functionality to print the current webpage with all the styles preserved in the print dialogue. So I'm thinking that screenshot might work.
Any idea or suggestions?
For printing the page and getting print dialog you can simply use window.print()
For better understanding please visit window.print()
This works perfectly fine:
<script type="text/javascript">
$(document).ready(function() {
$.fancybox({'href' : 'http://www.cnn.com','frameWidth':500,'frameHeight':500,'hideOnContentClick': false,'type':'iframe'});
});
</script>
That is, FancyBox opens and displays the CNN homepage. However, if I change the href attribute to "#pg"
and have the page coded this way:
<body>
<div id="pg"></div>
<script type="text/javascript">
document.getElementById("pg").innerHTML = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title></head><body>test me now</body></html>";
</script>
</body>
FancyBox opens but no text is displayed. (The text "text me now" is displayed in the #pg div element. Notice it is assigned to the DIV's innerHTML at the end of the page.)
Basically, I want to know if there is a way dynamically initialize a DIV's innerHTML property and display it as a FancyBox type iFrame? (The content of the iFrame will have a button that prints the iFrame's document.)
TIA
UPDATE: 07/28/12
As #arttronics suggested, I put together a jsFiddle
To summarize, ultimately the objective is to be able to click a button contained inside a FancyBox that prints the entire contents of the FancyBox without opening another window. (I want to use FancyBox as a report viewer for content parsed by Javascript.)
I assume that I need to display content using FancyBox's iframe player, but I could be wrong.
The jsFiddle shows:
The FancyBox is able to display text that validates as an HTML page using the inline player. The text can either be referenced via href or content.
However, when the player is an iframe and the content comes from href, then the FancyBox container is empty. If the contents comes from the content attribute, FancyBox shows a 404 error.
Simply comment and uncomment the jsFiddle code to see what I mean.
Any ideas for how I can meet my objective are appreciated and will get an up vote!
TIA.
Update: 07/31/2012
This new jsFiddle example: Iframe report viewer works but not in FancyBox
As you can see, I've tried several ways to display the iframe in FancyBox. And while FancyBox does display the contents of the iframe, the printing feature breaks.
I think one method for solving this problem would be to write the content of the myContent var to the FancyBox after it is loaded, but I can't (A) find the right DOM node to write to, and (B) I can't get FancyBox to display an iframe using its iframe player when the iframe src="about:blank".
Any suggestions? Or do you see a way to fix the jsFiddle example?
Do you really expect that <iframe src="#myID"></iframe> would open an element having id myID into iframe?
If you want to print content of the fancyBox, then you can add print button - http://jsfiddle.net/s3jRA/
Updated demo - http://jsfiddle.net/qVrLr/ - for creating and updating contents of iframe
As is often the case, I was looking at things backwards. The solution (with caveats) is this, rather than display a div element using the iframe player, hide an iframe in the html and display it using the inline player.
See this working example: jsFiddle
This solves the problem of being able to print dynamic content without opening another window. Additionally if the text overflows the FancyBox, the entire contents are still printed. (That's something I could not get to happen when I printed the FancyBox and changed the various page elements visibility styles to hidden).
Major Caveats
I've tested this in IE 8 and it works, however I still cannot get this to work in Chrome.
One reason for trying this approach was my assumption that I would be able to include within the dyanmic page content an #media print style. That technique does not work (in IE anyway) for some reason. However, inline styles do work as do HTML markup tags (notice the <strong> tag in the jsFiddle example: var myContent). So something is strange.
I would like to be able to print a PDF document automatically when a user clicks on a print button. Currently what the way I am doing it is I render the PDF and save to the server disk and have it appear in an iframe then I tried to print the content of the iframe using javascript:print(). however what is printed is an empty html page.
I am doing this because using the norm HTML print is wrecking the layout of the webpage i am trying to print. so i'm rendering the page to a pdf format to print the webpage. i don't want the users to be able to save the pdf hence i am trying to slient print the pdf page. hence i am loading it in an iframe by changing the src in the code behind and re-rendering the page and then triggering the js script.
function printPDF(){
document.iframe_printArea.focus();
document.iframe_printArea.print();
}
I am wondering if it is possible to print a pdf document loaded in an iframe using print() or whether this is even possible. I have extensively googled on this and have yet to come up with any solutions that works for a web application. Most of the resources are devoted to C# windows app. The platform I am using is .NET C#.
First of all I'm very sorry for whom that have to deal with IE6.
There is an non-standard DOM event developed by Microsoft that fire before print. It's onbeforeprint event (docs). What you can do is hiding everything but the iframe and shrink the iframe to the window size before print. and after print reverse the document to normal statues with onafterprint event.
function window.onbeforeprint()
{
// hide other elements and shrink the iframe
}
function window.onafterprint()
{
// unde what heppened onbeforeprint
}
I am using window.print() Javascript function for my HTML page to print, but it inclues Page URL and date in footer by default into the print or print preview.
Any quick solution, might be some patch in JS or something?
You can't remove the headers/footers programmatically. Visit this link or this SO question