How to detect whether UA is capable of displaying content inline - javascript

Browsers can display certain media inline, and will provided they are sent with content-disposition: inline. What's the best way to detect whether the browser is capable of doing so with a particular type of media?
I am running into the question lately with PDFs and Mac/FF, which seems to refuse to display PDFs inline (actually, in iFrame), instead prompting a download. I don't mind the forced download; I'd just like to be able to anticipate it so that I can give the end user a nice "download" link rather than an iFrame that fails at displaying inline content. My current solution is just browser detection (sample code below), but surely there must be a better mode.
var isMacFF = window.navigator.userAgent.search(/Mozilla.*Mac/i) != -1

This doesn't directly answer the question, but something you need to be aware when analyzing any answer you get - you can NOT reliably 100% determine that due to assorted browser plug-ins.
Specifically, in case of FireFox, look at PDF Downloader as an example - it basically allows the user 100% full control over how PDF gets displayed.

Related

WebRTC getDisplayMedia - How to avoid screen area selector

I would like to create a client-side screen capture of the actual webpage without a browser extension. Some bug reporting sites solved this problem so it seems to be possible. Browser compatibility is not an issue. It is ok if it works only on modern browsers.
I have tried html2canvas, but want a more accurate representation. So try to use WebRTC getDisplayMedia. I have tried the WebRTC example.
It works, but the screen selector dialog has too much information. Screens, apps, tabs. Besides this, it doesn't reflect the actual site design.
In my case, I want always the actual browser screen where the user clicked the capture button.
Is there a way to preselect the current tab and eliminate the screen selector dialog?
Or maybe some other solution/technology?

Printing pages on different Browsers

I'm encountering a lot of problems with printing on a rather huge website we are working on.
The problem is there are issues in FF, IE etc... that appear only when printing.
The workflow is like this: I click a print button on the page, a popup opens with different template and styles and the window.print command is triggered.
MY POSSIBLE SOLUTION:
When the popup opens, I will render the entire DOM in a canvas element and then put it back in page as a png file, and then trigger the print action.
Is this a feasible solution?
You can approach this in two ways:
Browser extension
Writing an extension for the browser(s) (at least Chrome and FireFox) will allow you to grab the current content as a bitmap you can use with canvas.
This is probably the fastest option as the screen snapshot is created internally. Though, I am not sure if the browser snapshots client window or the full document so this need to be determined.
Simulate the DOM tree
There are libraries such as html2canvas and canvas2image that simulates the DOM tree and tries to render an approximate representation of the web page.
There a couple of things to notice with this:
It's relatively slow
You may run into cross-origin restrictions in relation to images (work around is to use an image proxy)
You cannot get content of "foreign objects" (Flash, Java etc.)
It is not 100% accurate (if this matters)
When you have a snapshot one way or the other the other things should be straight forward. Just remember that users have different printers, drivers and resolutions and you may not be able to produce identical results cross-over as you are also dependent on the browser's own print implementation.
provide special css for print view:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
in which for everything you dont want to print use something like:
#qqq, .#aaa, #header, ...., ...., .banner{
display: none;
height: 0;
width: 0;
}
so you leave only content you want to see printed. In this case visitor or you dont need to use special print popup version. Just click print.
example: http://viliusle.github.io/miniPaint/ - only canvas will be printed.

Copy javascript made images to clipboard

Is there today with HTML5 a way to copy to clipboard, without browser plugins (and so without Flash nor java) nor short-term hacks, an image built in a canvas ?
The copy to clipboard would be initiated by javascript but having user confirmation or a dialog isn't a problem.
Solutions which don't work in Windows and Linux, or which don't work at least in Chrome and Firefox are without interest to me.
Ideally I would prefer a solution that doesn't impose to display the image (which is built in memory with document.createElement('canvas')) but that's not an absolute requirement.
As far as I'm aware, the Clipboard API is the only specification in this area. I've never used it and don't know how widely it's supported, but I suspect not widely. According to this quick and dirty test, the current versions of Chrome and Firefox fire the copy event. I believe the user has to initiate the copy (e.g., you say "press Ctrl+C to copy").
IE makes window.clipboardData available, but as far as I know you're limited to text and URLs.
So sadly, I think this is one of those answers that's basically: No, not yet.

Dragging and dropping images from Firefox into Microsoft Powerpoint

I am trying to make a web page which allows users to drag and drop images into Microsoft Office applications, specifically Powerpoint.
By default (as of FF3.5), Firefox will insert the source URL when an image is dropped rather than the image itself. After adding the following Javascript/jQuery code (derived from https://developer.mozilla.org/En/DragDrop/Drag_Operations),
$('img').attr('draggable', true).bind('dragstart', function (event) {
event.originalEvent.dataTransfer.effectAllowed = 'copy';
});
dragging and dropping works from Firefox to Word and Excel, but not to PowerPoint. For an example of what happens, see http://slides.html5rocks.com/#drag-and-drop. I have tested this with FF3.6 and FF9.
How can I make it work with PowerPoint?
Just drag'n'drop outside the boundaries of the ppt slide (to make sure you're not dropping on a predefined textbox) - and release the mouse button -no coding needed!
Firefox drag will drop the image at the center of te ppt slide.
Status quo
Sadly there is nothing you can do from within your browser and the application to enable drop support for PowerPoint.
This is something that needs to supported at source level in PowerPoint (and it seem to be if you don't drop the image on an existing element but right outside the slide frame you want to drop it onto - but probably depending on version).
If it (for some reason still) does not support the image part of the drop but just the link (and if there is no option provided for changing this behavior) there is little to do but to hope Microsoft will update PowerPoint with this support in the future, - or - check the following options for work-arounds if needed:
Add-ins
You can look into writing an add-in (or possibly just use a macro - you might need to lower security to medium [PDF] for macros) for PowerPoint that will take the link that is dropped and replace it with the image the link refers to.
Here is one place to get you started making add-ins if this is a viable option.
Here is a commercial framework that makes creating add-ins very simple.
(disclaimer in this regard: I am here assuming this will be possible due to add-ins such as this which allow you to show a live web page inside PP).
Pipe-line / work process
There is also the option of injecting a third-party applications in the pipe-line to do screen snapshots of the image and have it inserted automatically into PP.
SnagIt is such an application (and there are probably others) and it has free extensions that will allow you to integrate "snags" directly with PowerPoint.
Or (the perhaps too obvious option): simply copy the image in browser and paste it into PowerPoint.
What is your version of Powerpoint?
It's very important because image format support may be lacking.
If that's the case your code needs a minimum version warning addition.
Could also ask to convert image to suitable format.
It may even be the case that it's impossible to the version of Powerpoint you're using to support this in the way you want.
You could try to use html code.
This code might help you:
http://classroomtech.org.uk/2008/08/drag-and-drop-in-powerpoint/
Other possibilities are OLE object with a link to a image.
Could check how other Microsoft applications, that do something similar, handle things.
If that doesn't work you could try to generate an OLE object with a link to the image in it.

How can I disable print-screen functionality for a webpage in all browsers?

Using the following we can disable print-screens or screenshots in Internet Explorer:
<body onload=setInterval("window.clipboardData.setData('text','')",2)
oncontextmenu="return false" onselectstart="return false">
But these don't work in Mozilla, Chrome and other browsers.
Is there a better way to disable print-screens/screenshots?
What makes you think it's your decision if people should be able to take screenshots or not?
Luckily no browser but IE allows you to access the clipboard via JavaScript so you are out of luck :)
By the way, if I visited your site and it messed up my clipboard (it overwrites anything in there, even if it's unrelated to your site) - I might have stored something in it that I've just cut from some file and I was going to paste in a different file and thanks to your site it would now be lost.
So, the conclusion is: Stop doing crap like that.
It's an O.S. function, as well as a page function, and a print function so there are a few things you need to do - The steps below are specific for windows, however can be implemented in any O.S. with the same concept -
Disable the print screen at an O.S. Level
Here are the steps of disable Print Screen key:
1.Copy the following registry to notepad and saved as a .reg file.
Windows Registry Editor Version 5.00
[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout]
"Scancode Map"=hex:00,00,00,00,00,00,00,00,04,00,00,00,00,00,2a,e0,00,00,37,e0,\
00,00,54,00,00,00,00,00
2.Apply the registry
3.Sign out and sign in again.
Then you need to block the browsers capability of capturing screens in the cases where chrome or edge or firefox have extensions that enhance print screens -
And for extra measure, disable right click (I put it on document but you can put it per DOM
document.addEventListener('contextmenu',
event => event.preventDefault());
window.addEventListener("keyup",kPress,false);
function kPress(e)
{
var c=e.keyCode||e.charCode;
if (c==44) event.preventDefault();
}
Then as an extra, to disable printing and items, you need to mark the print media as display none
#media print {
.noprint {
visibility: hidden;
}
}
And if you want to be POPIA/GDPR compliant, you have to disable things like pdf download, object references and things so as a bonus item, Use PDF.js to render the pdf as html with full control over the rendering of the PDF, download and printing using the above
This reference allows password entries and successfully gave us full control over all features for capturing or saving information from protected sites
https://usefulangle.com/post/22/pdfjs-tutorial-2-viewing-a-password-protected-pdf
window.addEventListener("keyup",kPress,false);
function kPress(e)
{
var c=e.keyCode||e.charCode;
if (c==44) alert("print screen");
}

Categories