Use specific JavaScript code when on iOS and Chrome - javascript

I have two JavaScript snippets. One of them works well on all browsers except Google Chrome on iOS and the other snippet works really well for Google Chrome on iOS.
I would like to use a specific JavaScript code when a user visits my site with Google Chrome on iOS but use a different JavaScript code for every other browser.

I would suggest to use ua-parser
var parser = new UAParser();
if(parser.getBrowser().name === "Chrome" && parser.getOS().name === "iOS") {
//....
}

Related

Identify an opend Webbrowser with ShellExecute properly to work with document.getElement

I need to automation my job by filing Forms in webpage by js,I made a code like this:
var ie = new ActiveXObject("InternetExplorer.Application");
ie.visible = true;
ie.navigate("http://www.google.com");
while (ie.busy) WScript.Sleep(100);
ie.document.getElementsByName('q')[0].value ="3";
var Butn = ie.document.getElementsByName('btnK')[0];
Butn.click();
but I want this code work with another web browser (e.g.Firefox) so I tried something like this:
var ie = new ActiveXObject("Shell.Application");
var commandtoRun ="C:\\Program Files\\Mozilla Firefox\\firefox.exe";
ie.ShellExecute(commandtoRun,"http://www.google.com", "1");
while (ie.busy) WScript.Sleep(100);
ie.document.getElementsByName('q')[0].value ="3";
var Butn = ie.document.getElementsByName('btnK')[0];
Butn.click();
but this code throw an error:
'ie.document' is null or not an object
800A13F
I ask for any of these tow ways:
*dealing with a web browser already opened not only open one then applying the code.
*Identify the opened web browser in proper way to apply the code.
I can see that you are using an ActiveX object that is only supported by the IE browser.
This object is a Microsoft extension and is supported in Internet Explorer only.
If you are looking to automate the other browsers like Firefox, I suggest try to check Selenium web driver. I think that it is more suitable product to fulfill your requirements.
It is available to automate the browsers using many developing languages.
It looks like it is also possible to get an object of already opened browser.
See here: Can we use Selenium to work with an already open browser session?

How can I check if a browser is Chromium-based?

I have a Chrome extension, and I am currently writing a website to advertise it.
I know that a Chrome extension can be installed in all Chromium-based browsers (Chrome, Opera, etc.).
Is it possible to check if a browser can download the extension from the web store or is chromium-based?
I found code to detect if it was Google Chrome here. Correct me if I'm wrong, but I think window.chrome doesn't return in all Chromium-based browsers.
window.chrome
As of now, window.chrome works in all chromium based browsers
var isChromium = !!window.chrome;
console.log(isChromium)
Resources
https://browserstrangeness.github.io/css_hacks.html
http://browserhacks.com/
navigator.userAgentData
User-Agent Client Hints API returns information about the browser and operating system of a user. (Introduced in chrome 90)
var isChromium = !!navigator.userAgentData && navigator.userAgentData.brands.some(data => data.brand == 'Chromium');
console.log(isChromium)
Resources
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData
https://developer.mozilla.org/en-US/docs/Web/API/NavigatorUAData
https://web.dev/migrate-to-ua-ch/
Considering that you just want to get to know whether browser is chromium based or not ,
Method 1: ( Server Side Detection)
-- Get Browser name from client request itself and serving the webpage accordingly. For example, If backend is based on Nodejs, You can get browser name as answered in this answer.
Method 2: ( Client Side Detection)
-- On client Side ,You can first get the Browser Name as answered in this answer , and then check it from HARD-CODED Chromium-based browsers Array.
Try this. This check shows true for Chrome, Safari, Edge, Samsung browser… etc
The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing.
function isChromium(){
return window.CSS && window.CSS.supports && window.CSS.supports('(-webkit-appearance:none)');
}
Try using the following expression
navigator.userAgent.includes("Chrome")
I guess:
var isChrome = navigator.userAgent.match(/Chrome\/\d+/) !== null;

Navigator vibrate break the code on ios browsers

I want to use navigator.vibrate on my page.
This is my code:
var canVibrate = "vibrate" in navigator || "mozVibrate" in navigator;
if (canVibrate && !("vibrate" in navigator))
{
navigator.vibrate = navigator.mozVibrate;
}
$(document).on('click', '.answer', function (eve) {
$this = $(this);
navigator.vibrate(222);
// some other code ...
This works on Android devices but on iOS (I tested on Firfox, Chrome and Safari on some iOS devices) the code will be broken at this line.
Why is that?
Apple's mobile web browser simply does not have support for it.
Firefox and Chrome for iOS are wrappers around Safari's rendering engine.
Quentin is correct that Apple devices do not support the API.
The given code fails to check for vibration support when actually calling the method. To avoid the vibrate function being caught undefined:
const canVibrate = window.navigator.vibrate
if (canVibrate) window.navigator.vibrate(100)
We don't want our app to break down and be unusable on iOS devices.
But we really want to use navigator.vibrate() on Android or wherever possible.
One thing you can do is you can create your own policy over browser policies. Ask "Can we make iOS devices ignore navigator.vibrate()"?
The answer is "Well, yes you can do that by using a user agent parser."
(Such as Faisal Salman's UAParser to detect if the user's device was an iOS or Mac OS device.)
In your code, wrap all the navigator.vibrate() calls inside conditions like,
if(nameOfUsersOS != "iOS" && nameOfUsersOS != "Mac OS") { navigator.vibrate(); }
Note: You must replace nameOfUsersOS with your own variable name.
Note: This is only one possible approach. Policy makers of Apple can and sometimes do change their minds. That means in the future they could allow the good Vibration API just like they allowed the Web Speech API recently. You must use the solution in kotavy's answer unless your policy is like "no vibration for Apple users forever".

Distinguish between chrome and chromium using Javascript

Is it possible to distinguish Google Chrome from the open source Chromium browser using Javascript? The navigator.userAgent property seems to be identical in both browsers.
You may not want to just check for Chromium because Google Chrome's PDF plugin can also be used in Chromium (by simply copying the .dll file). In fact, I'm using it right now.
The best way is to check for the Chrome PDF plugin, using window.navigator.plugins:
var pdf = false;
for (i in window.navigator.plugins) {
if (window.navigator.plugins[i].name === "Chrome PDF Viewer") {
pdf = true;
}
}
If you want to use the filename instead of the name, it's "pdf.dll" (on Windows machines).

Windows Safari Freezes When Silverlight Calls a JavaScript window.alert/prompt

I have a Siverlight application, which needs to get something from the web page that hosts it. So I'm using HtmlPage.Window.Invoke("JS_OpenProject") in Silverlight.
Here is the JavaScript code:
function JS_OpenProject() {
// window.alert also crashes
window.alert("Here is a window.alert");
// window.prompt also crashes
//var result = window.prompt("Please input the id of the project to be opened:", "12345");
return result;
}
Safari freezes every time when the JavaScript method JS_OpenProject is called. If I remove the window.alert and window.prompt, it's fine.
On Windows, I tested my Silverlight application with JavaScript calling against IE, Chrome and Firefox, everything works fine, but just the Safari.
I have googled a lot, but no luck.
Please advise!
Thanks.
Peter
I had the same problem with FireFox and that seems to have been corrected now. The problem arises when Silverlight is run in windowsless mode.
If you don't need it turn it off, it will run even faster.

Categories

Resources