How to test if the browser support <input capture /> - javascript

How could I test if the current browser support the feature of mobile browsers to use the device camera to take a picture?
https://addpipe.com/html-media-capture-demo/
Capture is basically ignored in all desktop browsers: https://caniuse.com/#feat=html-media-capture
How could I detect if I can use capture (and that it won't show an open file dialog, but will actually open the picture application)?

You can create an input element in JS and test for the capture property. It will be undefined if unsupported.
var el = document.createElement('input')
var supported = el.capture != undefined
console.log('capture supported: '+supported)
Here's what it looks like in the iOS simulator

You can use the following function:
function supported(attribute) {
var i = document.createElement('input');
i.setAttribute(attribute, true);
return !!i[attribute];
}
And you can call it, like supported('capture'), or if you want to test for the accept attribute supported('accept')
Source: http://anssiko.github.io/html-media-capture/

Related

How to add an alert box if the browser is not firefox

I want to make a javascript code that if the user is using a chromium browser triggers an alert telling to change to Firefox/Other browser that are not using chromium derivates.
I tried modifying the folowing code:
let notChrome = !/Chrome/.test(navigator.userAgent)
let alertMessage = "Please use Google Chrome to access this site.\nSome key features do not work in browsers other than Chrome."
if(notChrome) alert(alertMessage)
But I don't know how to modify-it
Based on detect-all-firefox-versions-in-js,below is a reference for you
let notFirefox = !/firefox/.test(navigator.userAgent.toLowerCase())
let alertMessage = "Please use Firefox to access this site.\nSome key features do not work in browsers other than Firefox."
if(notFirefox) alert(alertMessage)
You should check if the browser is firefox then alert what you want
if(navigator.userAgent.toLowerCase().indexOf('firefox') == -1){
alert("Use Firefox");
}

Alert when page opened not in Chrome

I'm trying to get an alert to pop up when the user opens my webpage in a browser other than Chrome. I have this:
if (/what to put here to make the below show only if the browser is not Google Chrome?/) {
alert( "Please use Google Chrome to access this site.\nSome key features do not work in browsers other than Chrome." );
}
Found this here as a possible condition: navigator.userAgent.search("Chrome"), but can't make it work. Please advise. :-)
As the comments above point out by referencing questions you can test for chrome in the userAgent. But you would want to reverse that:
let notChrome = !/Chrome/.test(navigator.userAgent)
let alertMessage = "Please use Google Chrome to access this site.\nSome key features do not work in browsers other than Chrome."
if(notChrome) alert(alertMessage)
This will solve the problem unless the user is spoofing their userAgent. This is unusual though. To fully check you should also check for a feature chrome has AND the userAgent:
let notChrome = !/Chrome/.test(navigator.userAgent) && !("webkitAppearance" in document.body.style)
let alertMessage = "Please use Google Chrome to access this site.\nSome key features do not work in browsers other than Chrome."
if(notChrome) alert(alertMessage)
This should to it.
var isChrome = !!window.chrome; // "!!" converts the object to a boolean value
console.log(isChrome); // Just to visualize what's happening
/** Example: User uses Firefox, therefore isChrome is false; alert get's triggered */
if (isChrome !== true) {
alert("Please use Google Chrome to access this site.\nSome key features do not work in browsers other than Chrome.");
}

How to create ActiveX object in asp.net

How can i create ActiveX Object in java script using asp.net.what i need requirements to create that ActiveX object if i use any DLL to create that object and how can i create can anyone provide description of to create ActiveX object
My Tried code is:
<script lang="javascript" type="text/javascript">
function getSize()
{
var oas = new ActiveXObject("Scripting.FileSystemObject");
var d = document.getElementById('b').value;
var e = oas.getFile(d);
var f = e.size;
return(f);
}
function checkFileType()
{
var path = document.getElementById('file1').value;
var Index = path.lastIndexOf(".");
var length = path.length;
var filetype = path.substring(Index,length)
if ((filetype == ".doc") ||(filetype == ".pdf") ||(filetype == ".jpg") ||(filetype == ".gif") ||(filetype == ".xls")||(filetype==".odt"))
{
var x = getSize(); if (x > 5242880)
{
alert('only upto 5 MB file is allowed');
return false;
}
}
else
{
alert('Only .doc, .pdf, .jpg, .gif, .xls is allowed');return false;
}
}
</script>
<form id="form1" runat="server">
<input type="file" name="b" id="file1" onchange="return checkFileType();" />
<div>
</div>
</form>
In the above code i am getting this line in code
" var oas = new ActiveXObject("Scripting.FileSystemObject");" getting Exception is "0x800a01ad - JavaScript runtime error: Automation server can't create object".
Can anyone tell me to how can i create ActiveX object properly and what i need setting and which DLL's i use and all can anyone help me out.
Thank You
This validation is not a supported method in all the browsers.
Anyway, for IE9 or below (where .files is not supported) you can use this. To use this method, you will need to enable activex object in IE.
Go to Internet Options->Security Tab. Select trusted website, and click Sites button. It will give you an option to add the url. Add the url of your site, and save. Then click on the button saying "custom levels". It will open a list of options. Find the one saying "Initialize and script activex controls not marked as safe" and enable it.
Save and close the dialog boxes, and refresh your webpage.
Edit:
Few notes:
This is extremely unsecure method, so I would suggest improving compatibility and saying no to anything below IE9.
Secondly, this is something you have to enable on every single user's machine. Otherwise, that line will always throw an exception.
So, if you have to stick to IE8 or lower, and have control over your userbase, then only use this. Otherwise, just use flash upload method for IE browsers. Your users might hate installing flash, but there is nothing you can do.
P.S. I was doing this same thing about an hour ago. Lucky for you, I did all the research. :)
Edit: On a secondary note, can someone help me figure out how to get rid of XML dataislands without major rewrite? That is the only thing stopping me from saying goodbye to IE6.

Controlling a Firefox Extension via Javascript

Is it possible, using javascript, to control an overlay firefox extension? I've extracted the contents of the extension and have identified what functions/methods I need to run, but they are not accessible within the scope of the console.
Thanks in advance for any ideas.
Yes it possible to interact with other add-ons, given the right circumstances.
My test case here will be com.googlecode.sqlitemanager.openInOwnWindow(), which is part of the SqliteManager addon.
In newer builds (I'm using Nightly), there is the Browser Toolbox. With it is is as simple as opening a toolbox and executing com.googlecode.sqlitemanager.openInOwnWindow() in the Console.
You may instead use the Browser Console (or any chrome enabled WebDev Console for that matter, e.g. the Console of "about:newtab"). But you need some boilerplate code to first find the browser window. So here is the code you can execute there: var bwin = Services.wm.getMostRecentWindow("navigator:browser"); bwin.com.googlecode.sqlitemanager.openInOwnWindow()
Again, enable chrome debugging. Then open a Scratchpad and switch to Chrome in the Environment menu. Now executing com.googlecode.sqlitemanager.openInOwnWindow() in our Scratchpad will work.
You may of course write your own overlay add-on.
As a last resort, patch the add-on itself.
Bootstrapped/SDK add-ons: you can load XPIProvider.jsm (which changed location recently) and get to the bootstrapped scope (run environment of bootstrap.js) via XPIProvider.bootstrapScopes[addonID], and take it from there (use whatever is in the bootstrap scope, e.g. the SDK loader).
Now about the right circumstances: If and how you can interact with a certain add-on depends on the add-on. Add-ons may have global symbols in their overlay and hence browser window, such as in the example I used. Or may use (to some extend) JS code modules. Or have their own custom loader stuff (e.g. AdBlock Plus has their own require()-like stuff and SDK add-ons have their own loader, which isn't exactly easy to infiltate)...
Since your question is rather unspecific, I'll leave it at this.
Edit by question asker: This is correct, however I figured I'd add an example of the code I ended up using in the end, which was in fact taken directly from mozilla's developer network website:
In my chrome js:
var myExtension = {
myListener: function(evt) {
IprPreferences.setFreshIpStatus(true); // replace with whatever you want to 'fire' in the extension
}
}
document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
// The last value is a Mozilla-specific value to indicate untrusted content is allowed to trigger the event.
In the web content:
var element = document.createElement("MyExtensionDataElement");
element.setAttribute("attribute1", "foobar");
element.setAttribute("attribute2", "hello world");
document.documentElement.appendChild(element);
var evt = document.createEvent("Events");
evt.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(evt);
Update for Firefox 47 and up
Things changed drastically in Firefox 47. This is the new way to access it.
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var addonid = 'Profilist#jetpack';
var scope = XPIScope.XPIProvider.activeAddons.get(addonid).bootstrapScope
Old way for < Firefox 47
Update for methods of today
Typically you will do so like this:
If i wanted to get into AdBlocks scope, I check AdBlock id, it is {d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d} so I would go:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var adblockScope = XPIScope.XPIProvider.bootstrapScopes['{d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d}'];
You can now tap into anything there.
Another example, I have an addon installed with id NativeShot#jetpack
I would tap into it like this:
var XPIScope = Cu.import('resource://gre/modules/addons/XPIProvider.jsm');
var nativeshotScope = XPIScope.XPIProvider.bootstrapScopes['NativeShot#jetpack'];
if you do console.log(nativeshotScope) you will see all that is inside.

How can I detect if a browser is Safari 5+ using Javascript?

I need a method to detect that the browser is Safari 5 or higher - but the javascript should not rely on useragent since it can get overriden! Any ideas?
I have found PPK's browser detection code to be very reliable. It utilizes navigator.vendor and navigator.userAgent.
It's not possible to reliably detect the browser without accepting that the user agent can be modified by the end-user and / or the browser itself.
As a consequence of point 1. it is almost always best to use capabilities support detection (e.g. such as with Modernizr).
As there are times when you need to specifically detect a browser, such as disabling or enabling a particular capability that is misreported / not detectable, e.g. File Drag and Drop in Safari 5
As an example, the following code provides a function isFileDragAndDropSupported() which makes use of the isSafari5() function to return that File Drag and Drop is supported on Safari 5 even though window.FileReader is not defined in Safari 5.
function isSafari5() {
return !!navigator.userAgent.match(' Safari/') && !navigator.userAgent.match(' Chrom') && !!navigator.userAgent.match(' Version/5.');
};
function isFileAPIEnabled () {
return !!window.FileReader;
};
function isFileDragAndDropSupported() {
var isiOS = !!navigator.userAgent.match('iPhone OS') || !!navigator.userAgent.match('iPad');
return (Modernizr.draganddrop && !isiOS && (isFileAPIEnabled() || isSafari5()));
};
Note: Modernizr is required only for the isFileDragAndDropSupported() function. The isSafari5() function will work stand-alone.

Categories

Resources