Trigger click on embedded PDF - javascript

I have a PDF embedded in a web page using the following code:
<object id="pdfviewer" data='test_full.pdf#page=1&toolbar=0&statusbar=0&messages=0&navpanes=0'
type='application/pdf'
width='500px'
height='350px'>
The PDF itself is set to open in full screen mode which shows no controls. The user can advance the slides by clicking on the view.
What I'd like to have is some way to trigger that click so that I can advance 2 similar PDF:s side-by-side (one for the actual slideshow and one for the speaker notes). Is this possible to do in javascript and/or jQuery? I have tried using the click()-method but it doesn't get through to the embedded PDF.
Update: Can't find any info on it, so I guess I'm out of luck and have to try a workaround. Am currently juggling 3 embeds of the same pdf (current page, next page and previous page), hiding and showing them and loading more pages as the user clicks around.

I doubt it. Allowing web page scripts to pass input events to the PDF viewer could be a security risk (since the viewer generally has access to system file dialogues via things like Save As).

Related

Load External Custom Page and Execute Custom CSS or Javascript on The page

i'm building an online document portal that supports all Microsoft Office formats.
Instead of building my own module, i'm utilizing Google Docs Online Viewer since it already handles
this task properly, my only problem is it loads the header toolbar, which i dont want.
take for example This custom pdf-URL(i just googled for any pdf document), The navigation toolbar at the foot, but the header toobar, i want it hidden - all within the iFrame.
https://docs.google.com/viewer?url=http://www.scorpioncomputerservices.com/Press%20Coverage/Billgates.doc&embedded=false&controls=false
After Inspecting the Element on Chrome, i found the section of code controlling the element, problem is, how to hide this element on page load, by forcing a script/style to be executed on the page, while loading.
i would like to know if there's a way i could force-delete or hide the element controlling the toolbar within the iFrame, or better still if there are any alternatives to what i intend to do. my code would have looked like this
var obj = iframe.document.querySelectorAll('[role="toolbar"]');
obj.parentNode.removeElement(obj);
// or - i'm not sure anyof this would work.. and since it is loaded inside an iframe
// how do i execute this.
obj.remove();
i dont want my audience to be able to download the document, obviously curious developers might find a way, but thats going to be less than 2% - 5% of the total users.
how do i go about this please using javascript/CSS/or any library.
If you change the GET variable embedded to true the viewer won't display the top bar, however there's no way to edit the page inside the iFrame as Google has enabled cross site protection so the browser will prevent you from running any javascript to modify the content of the iFrame.
The only way to use the google document viewer is to get your site to load it in the background (not using an iFrame) and modify it before serving the page to the user.
Or alternitively I reccommend using an open source JS PDF viewer such as ViewerJS

Google Chrome PDF Viewer API

I do have a pdf embeded in to the page. It does work and it has it's own buttons, like print, download, rotate, zoom-in, zoom-out.
Is it possible to control these buttons from javascript? I want to show the pdf, but the buttons for download and print I want to control by myslef, with different design and placements outside of the embeded element.
TO sum up, I want to hide all buttons which is shown to the user from the default pdf viewer, except the page number, and I want to separately create donwload and print button with my own design but with the same functionality.
I've done a little bit of research and I found this: https://bugs.chromium.org/p/chromium/issues/detail?id=135146
which is yet has unknown status. Does it mean the API for Chrome pdf viewer doesnt exist? I couldnt fine any.
Another solution is to integrate PDF.js in my own web app, which is heavy (almost 2.6mb zipped) and time consuming.
Any idea is welcome.

Enter full screen whenever page is loaded

I'm working on asp.net quiz application. The mandatory requirement of this application is: when the application starts (page is requested), it automatically enters into full screen.
Now I tried dozen of solutions (JS & Jquery's plugins)
JS Solution
Mozila's
Jquery Plugins
a number of different jquery's plugins, but Chrome & Firefox are not allowing me to do so. Because it states that it needs user interaction for that.
Can somebody please help me out of this situation? Solution can be browser dependent.
Details about application:
Total 5 aspx pages.
One page is an iframe/frame in another page.
Quick and dirty solution. Let's create another page which will be our container page. Put an Iframe there, calculate Iframe height width attribute based on the screen size. make the first page as iframe source. on the iframe put frameborder=0, so from user perspective it will look like single page
For full screen check this link http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Prevent dowloading of files

I have made a small web page in which I have some modal windows (jquery.simplemodal). When those windows are showed they should display two pdf files ( downloaded from server ).
<div id="modal1"> - hiden modal window
<embed src="/FileDownload?id=100" width="100%" height="600px">
<embed src="/FileDownload?id=150" width="100%" height="600px">
</div>
<table>
<tr>
<td>
Modal Window 1
</td>
</tr>
</tale>
The problem I have is that when the page is loaded also is downloading all files from server.
From HTML point of view I had read that nothing is possible to do to avoid this.
Can you please tell me if is posible to do that with Javascript ( for example updating src's embed element when the modal window is first displayed )?
On http://stackoverflow.com I have found some topics about changing the properties of an element but nothing is working on me.
JavaScript: Changing src-attribute of a embed-tag
Can i open a modal window from file A and displaying file B on the modal window?
Thank you!
P.S. This is an Intranet application. I want just to avoid downloading 20-40 files (a few MB each ) every time the page is open. The other solution I am thinking is to use a Java applet but I think this would complicate this small project.
Using jQuery. I believe this is what you want to do: only load embed files if you click on the link which pops up the modal?
$("a").click( function (e) {
e.preventDefault();
$("#modal1").append("<embed id='100' src='/FileDownload?id=100' width='100%' height='600px'/><embed id='150' src='/FileDownload?id=100' width='100%' height='600px'/>");
$("#modal1").show();
});
And the Fiddle
The nature of Web browsers is to download files to a cache so that upon the next visit, or during page changes, display times are greatly reduced. As a web developer there is nothing you can do to prevent this. The user can turn this feature off in his own browser if he desires to keep his cache clean, but you and your site cannot. There are ways to impede a viewer from intentionally downloading an image or file such as disabling right clicks over an image, but there are ways for a savvy user to get around these methods as well.
PDF files especially need to be downloaded to speed up viewing. If this is turned off, the user experience will be so slow you will drive people away from your site.
Even if its impossible to completely protect your files, there are a few ways to make it harder to download your original PDF document, we have a few PHP scripts that may help you that you can find inside our desktop publisher (available in GPL and commercial).
Its free to download and you can grab the scripts even if you don't use the rest of the product. If you download it and as you publish your document you can expand advanced settings and tick "sign and obfuscate" and you should get the scripts necessary to protect your files.
http://flexpaper.devaldi.com/flexpaper_flip_zine.jsp

Is there a way to get the current active page from a PDF & PPT viewer embeded in a website

I have a PDF (or PPT) document that i want to embed in a website. This would be done using one of the standard plugins available for this. What I want is to get the current active page number from the plugin in the website.
IE. Using javascript, or anything else, use a function that gets the current active page from the plugin. Does anyone know of either:
a) A specific plugin that would allow this.
b) A workaround, or hack to do this.
Thanks.
No, there isn't. The adobe plugin runs in a completely different sandbox and interacts with the browser through a different API.
You could use imagemagick's command "convert" to turn your pdf into image files, displaying them in the browser via JS. You could create a image slideshow where you know which page your visitor is viewing.

Categories