I am a javascript noob, so this question might seem very basic and I might need a lot of directions :)
This is the effect I want to create:
The user is currently viewing a PDF in the browser. The doc is embedded with the tag in the HTML. My PDF has forms in it, so there is some processing (validations etc) that I do inside the PDF as the user is interacting with it. Sometimes, after immediately entering a value the user closes the PDF - and my last bit of processing is incomplete.
In such a case, I would like to (1) stop the PDF from closing till my processing is done (the HTML is aware of the processing status of the PDF, so the HTML knows when a close can be allowed) (2) While I have stopped the PDF from closing, after the user has tried to close the window, I want to display some sort of a message to him indicating that the PDf is not done with the processing yet (3) When the message from (2) is being displayed to the user, interaction with the PDF should be disabled - and ideally this fact should be expressed visually. For ex, the PDF can appear grayed out in the background of the message (4)After I am done with the processing I want to close the browser window
For (1),(4) I am using onbeforeunload, and it serves my purposes well. But on the usability front -(2), (3) - I have no clue as to how I must proceed. It could be sort of what Google Image search does when you click on a thumbnail on the main page. - there is an image in the foreground(I could replace this with a message of my own), the background is grayed. However it doesnt prevent interactions with the background - clicking on it takes me to the original webpage. Also, I dont know whether the JS will work when a PDF is already open.
Thanks!
For the benefit of others, squarehead's answer to his own question is to embed the PDF plugin in an HTML page while making it fill the window.
It'll look the same, but the HTML and any associated javascript will still be around and, if you're dealing with browsers which don't allow content to overlap plugins, you can just use Javascript to reduce the height of the PDF view by a couple of ems whenever a message needs to be displayed in order to make room for a notification bar.
Unless I'm mistaken though, width="100%" height="100%" isn't valid XHTML. The proper solution would be to either use style="width: 100%; height: 100%" or add this to the stylesheet.
#PDFcontent { width: 100%; height: 100%; }
Update: As for preventing the user from closing the PDF before processing is finished, the ability to do so is very restricted in order to minimize the possibility for abuse, so all you can really reliably do is display an "Are you sure?" dialog.
Here's the code I used in one of my projects:
window.onbeforeunload = function() {
if ($('#quote_preview').text() != "" && document.submit_warn) {
return "The currently-entered quote has not been" +
" submitted. Are you sure you want to discard it?";
}
};
I'm using jQuery in this case, but the basic idea is that you assign a function as the onbeforeunload handler which determines whether an "Are you sure?" dialog needs to be displayed and, if so, returns the text to display in it.
The browser controls what extra explanation (if any) will be displayed, what the OK/Cancel buttons will look like, and whether manipulation of the page is blocked while the dialog is open. I don't think it's possible to control that last one yourself.
< object id="PDFcontent" data="untitled1.pdf" type="application/pdf" width="100%" height="100%"/>
Related
In a web-based ERP , we need to print POS reciept on the client . When I click print on client another web page opens up, and I have to click print again so that it goes into the printer. Then I have to close the window and then go back to data entry webpage page again.
How can I print from the client browser most efficiently? i.e. After the data is saved, I click print and it opens, prints and closes the browser window automatically. How can this be achieved? In offline versions it happens, but when i take it on browser it doesn't occur. Pls help
Front end:- .NET, HTML5, Javascript, Jquery
Backend (Database):- MS SQL
There is one way to print a page using JavaScript, excluding additional libraries. It uses a method called window.print()
You seemed to suggest that you wanted to remove the prompt that happens with the window.print() method. I don't recommend this behaviour, as most people don't want their printer suddenly spitting out paper, not to mention that this is technically malware. However, assuming you have a legitimate use case for this behaviour, there is a duplicate question with answers already.
HTML / Javascript One Click Print (no dialogs)
I am calling print function on onclick event with javascript.
<input type="button" value="Print" onclick="window.print()" />
I use this code for printing a page but i want to pass 'print preview' window.
How to print directly to default printer without opening dialog box of print.
VISIT MY PAGE WWW.......
(USER CLICKS)
KOBOM! 100 pages printed.
It should not be possible because it would otherwise be a security issue(this case; spam). Your code involves I/O-communcation and this goes via the browser(everything goes through the browser but here they take control from your code). You are actually doing it right, but the browser you have chosen have decided to popup a dialog box and wait for the user to accept the print command.
Well,the browser designer wants a good user experience for their users and in this way they prevent potential spam. Javascript knows it and thats why there is no parameters for this in the printer function.
You still want to do it? try to find an add-on or a tweak for your current browser to allow such bypasses. Create your own application(could be a browser).
Issue with this approach? You dont want to ask other users to install or configure such things; Too much for the average user and your intent was to make things easier.
I think I know the answer already is probably "No", but I'll ask anyway, (as there may be a work around like a "lightbox" option etc)
I wrote a banner exchange script, with a difference. When the banner is clicked, a new window opens appears inviting the user to subscribe to a newsletter first, (or go straight to site)
This works fine if I use a window.open() prompt, as effectively the text for the popup is pulled in from URL of the window ... but I want to use a (modal?) window without the location bar etc. But here's the problem: The script runs on siteA, and displays the banners on HTML page of siteB. When you click the banner, it cannot access the javascript/CSS modal window code on the host HTML page. I think even with a light box div, the image or link has to be "hard coded" into the HTML page first. Can anyone envisage a work-around?
Here is what I've tried thus far (in simplified form):
<script>
hide id 0
</script>
<div>
<object data=pop-up text pulled from Site A: visibility:hidden id=0 width="720" height="600">
</div>
<object data=banner code pulled from SiteA width="490" height="90">
(I tried running the javascript from site A, and calling the hide routine via parent.document... to get to the javascript hide routine within the HTML page. Adding an alert to this 'calling' javascript, I get "SiteA says: hallo" when I click the banner)
I also tried jumping the banner to a script that would redraw the code to "_top" of the browser, and display the pop-up code in a div on this new page. I tried window.history.back to get the HTML from the page we've just left ... but all that does is reload the same page and discard the new code
I made the second object code above 'almost' same size as banner so text above and below if on HTML page flows properly.
On a slight tangent, it there a way to print a "block" of code in Javasript. In PERL, you can use "print <<EOF", but at present, if I want to print a large amount of text via javascript, I'm using +'xxxx xxx xxx xx' +'xxx xxx xxx' and escaping each and every single quote and newline. Is there a better way to print a line of code that contains numerous newline feeds?
ASP.Net Webforms pages are wrapped in a massive form, which restricts other forms on the page because nested forms don't work. This is intentional because in a webforms project, there can only be one form per page, and all of the server/client interaction require it. In order to build a custom form, I put together a modal dialog in this way. In order to allow for proper error messages from the server, my modal dialog has to post back to itself. In order to do this, I followed this trick to use the form target as the name of the window the dialog is in.
The problem comes when I try to add a button to download a file. When I try to download a file from this dialog now, nothing happens. I can redirect my response to the file in question, but I can't write the file to the response because the dialog box just sits there when I click the button and nothing happens.
After quite some time researching and building a small test case, I found out that there are several interesting factors here.
Response.WriteFile() works fine in webforms, even when the form is set with a target of the current window.
Modal dialogs can download files perfectly fine, unless the form is set to the target of the current window.
Through extensive testing, this appears to be an obscure bug, or perhaps even a strange attempt at security. This also appears to be specific to IE 8, though I didn't get to test other versions of IE.
The trick to allowing the download inside the modal dialog is to change the form's target.
function downloader() {
document.getElementById("form1").target = "_blank";
}
This fixes the IE bug and appears to work in all other browsers (though I couldn't get opera to show the pop up at all, even with "allow all popups").
Thought my day of toiling shouldn't go to waste and maybe this will help someone else in the future.
I have a requirement where I need to print a specific word document when I click on a button in IE8/IE9. I tried to find a way using ExecWB and other methods but could not achieve my goal. Couple of constraints I have are as follows.
The word document is availble through URL and this URL is from a different site than the page where I am clicking the button to print (XSS considerations ?)
I need to directly print using default printer without popping up the print dialog.
Is this possible in anyway?
Impossible from within the context of HTML page, without a custom browser extension. Word document must open before it's printed (maybe not visually presented to the user upon opening, but MS Word or some other application that is capable of opening word docs must be installed on the client system. There is Office extension for IE, which can be used to open the document, but the user has to click on the print button to invoke the dialog. There's nothing that you can do from within javascript to accomplish that. I'm sure you could, if you wrote your own IE extension/plugin, but unless your users are corporate that must install it, nobody else will.
I hope I'm not lying to you.