Mac/Windows Pop up Virtual Keyboard in Javascript - javascript

I'm working on a webapp that's designed for use on large touchscreen monitors. It is not a mobile app; it will run in FireFox and Chrome on mac OS X and windows. I am looking for a way to programmatically pop up the OS's native on-screen keyboard from javascript. In Win 7, this happens automatically when the user focuses on a text area (just like iOS and Android), but for older versions of Windows and OS X, the user has to manually pull it up, which is a nuisance I would like to eliminate.
Ideally, it would work like Win7/iOS/Android and pop up automatically when the user focuses on a text area, but I'll settle for any javascript that pops up the keyboard, even if I have to add it for every text box.
If this is even possible, I'm sure it's different for Mac vs Windows, so I guess this is really two questions in one. Any help is appreciated.

OK, I've tested this locally on my own Mac (version 10.6.8) and Windows XP so the good news is that it works (and it is surprisingly easy).
The essential idea is:
Know how to open the on-screen keyboard from command line
Set up your browser to allow the command line to be executed from JavaScript
Write your HTML :-)
Instructions for both platforms are as follows.
Mac
For Mac, download and build this Xcode project:
https://github.com/nriley/keyboardViewer
Make sure your build target is the same as the client Mac (e.g. 64 bit Intel, etc). The output will be an executable file called keyboardViewer. This will pop open the on-screen keyboard when executed.
Let's assume you've saved keyboadViewer onto the user's Desktop then the command you will want to execute is (as in my case):
/Users/Oliver/Desktop/keyboardViewer.
Windows
On Windows, it is much easier to open the on-screen keyboard from the command line. The following (or similar) will do it:
C:\WINDOWS\system32\osk.exe
Firefox
Next, you are going to have to execute this file (or Windows command) from a browser. So, install the Firefox add-on here:
https://addons.mozilla.org/en-US/firefox/addon/commandrun/
This add-on will allow you to execute OS commands (e.g. execute files) from JavaScript. Before you can execute this from the add-on, you will need to add this command to the list of allowed commands.
To do this, go to about:config in the browser address bar. Right click on the list of preferences and select New > String. The name of the new preference you want to add is extensions.commandrun.allowedcommands. For the value, enter the following:
On Mac: ["/Users/Oliver/Desktop/keyboardViewer"]
On Windows: ["C:\\WINDOWS\\system32\\osk.exe"]
HTML
Now, you will be able to open the on-screen keyboard from Firefox with HTML like this:
<script language="javascript">
function openKeyboard(){
CommandRun.run("/Users/Oliver/Desktop/keyboardViewer", []);
}
</script>
<input type="text" onfocus="javascript:openKeyboard();" />
On Windows, substitute the following:
CommandRun.run("C:\\WINDOWS\\system32\\osk.exe", []);
Alternative
An alternative is to write your own browser in something like Adobe Air. Using that method, your JavaScript calls your Air app and your Air app then executes keyboardViewer (or the Windows equivalent).

Related

Chrome SuppressDifferentOriginSubframeJSDialogs setting override using JS?

The Chrome dev team apparently just rolled out a new "feature" called SuppressDifferentOriginSubframeJSDialogs, which makes it so alert+confirm boxes from an iFrame on a different domain than the parent does not show up, by default: https://www.chromestatus.com/feature/5148698084376576
This means if you have an embedded form, and you relied upon the standard JavaScript alert to inform the user of errors (or a confirm to ensure they want to make a change), it now does nothing, completely destroying the UX.
Obviously we can overwrite the built-in alert and confirms with custom ones, but moving away from what is built into the browser now introduces re-designs for every UI (mobile, tablet, laptop, desktop, etc.) instead of just relying upon proven, built-in technology.
Is there a way to change this cross-domain setting, or to whitelist specific domains to override this feature? We do have access to the parent site with an external JS include file (obviously, otherwise this would be a wide-open back door).
To Disable SuppressDifferentOriginSubframeJSDialogs , which block js Dialog box pop up
If you are single users ( Windows ) :
Right click on desktop and create a shortcut
Windows will pop up a screen and ask you "type the location of the item:"....now paste those value into the textbox
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-features=SuppressDifferentOriginSubframeJSDialogs
Click "next" then "finish" button to create the shortcut
Now you shall see a chrome shortcut created in your desktop .Close all active Chrome instance ( if exists ) then launch the shortcut and you will found Js pop up wont block anymore.
Tips :
If you want push this fix to all your cooperate domain users , you may consider use Domain group policy to update Chrome shortcut value or use custom domain logon script logic to do so
I found a setting in the latest Chrome GPO template that creates a reg entry that will deal with this and the same reg entry placed in the Edge location also resolves the error there. (at least it worked for the problem that came up for us yesterday FWIW)
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge]
"SuppressDifferentOriginSubframeDialogs"=dword:00000000
[HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome]
"SuppressDifferentOriginSubframeDialogs"=dword:00000000
The latest Edge GPO templates do not have the setting yet, but I imagine it's only a matter of time.
Today I tried it again with Google Chrome Version 92.0.4515.131 and it suddenly worked again. Can anyone confirm this?
Add for Mac users.
If you use mac OS:
Quit all running instances of Chrome.
Run the terminal application.
In the terminal, run the command:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-features="SuppressDifferentOriginSubframeJSDialogs"
You can see more details here :
https://trailblazer.salesforce.com/issues_view?title=salesforce-functionality-impacted-in-[%E2%80%A6]oss-origin-iframe-javascript-dialogs&Id=a1p4V000002BRMX

Weinre how to add new targets?

Hello I am new to Weinre and I need to debug my website which seems to act strange when opened using an IOS platform.
So I am using Weinre to debug it. I installed the tool and tested it running with the demo targets in the server itself.
Now I need to add my website as a target and run it with an iphon (or ipad) and debug it with Weinre. I don't know how to add my website as a target, I cannot manually add the
<script src="http://123.456.7.89:8080/target/target-script-min.js#anonymous"></script>
script (do not have permission to manually change the page). so How can I do my debugging with Weinre?
Thanks
You can try using a bookmarklet. The main weinre server page actually has a bookmarklet in it, for itself, that you should be able to use directly, if you can figure out how to set up a bookmarklet for your device. This seems to change release-release for mobile browsers, so you might want to do a google search on "bookmarklet" and your device's name or the OS release, to see if anyone has any tips.

Firebug like debugging on Android

I have seen several posts that talk about remote debugging of javascript code on Android, but they all miss the point of what I am trying to do.
I have a Nexus 7 and I want to use it as a remote development environment when I am away from my desktop. I have created a chrooted debian distribution to run apache and php and git (via ssh). This chrooted environment mounts a subdirectory of the /sdcard directory from outside the chroot environement. Apache document root of a virtual host is pointing at a directory within this. Before leaving the desktop I can git push the latest release to the tablet. When I return git pull can get what I have done back again.
I then (when away from home and NOT connected to any network) can edit the code using an Android editor (using the 920 text editor), but then run the browser to look at what I have developed using localhost the apache virtual host picks this up and displays it.
The application I am developing IS NOT FOR ANDROID - it is ultimately for the desktop. But I want to be able to debug it like I was on the desktop. Breakpoints and single stepping are the prime thing, but also I tend to use the html section in firebug to adjust my CSS before editing it.
Is there a way to get either the chrome developer tools or firebug add on for firefox to load into a browser that will run in android?
I use Firebug lite bookmarklet for iPhone and iPad, never tried on Android, check this out http://martinkool.com/post/13629963755/firebug-on-ipad-and-iphone it must be similar on Android.
To activate it use this steps:
Create a new bookmark or bookmark a page
Rename the bookmark to “Firebug”
Copy the textarea link:
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?Fi+'NS':Fi;Er;Er;Er;(Fe[0]||Fe[0]).appendChild(E);E=new%20Image;Er;})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
Edit the Firebug bookmarklet, remove the URL and paste the
bookmarklet
Choose “Done” (on the virtual keyboard) and you’re all set
Hitting that bookmarklet should give you a fully functioning Firebug at the bottom of your mobile device.
At least not for Firefox Mobile, because all the devtools are still partially based on XUL, where the Firefox Mobile is using Native UI.
I don't think there is any plan in the close future to change this situation; it's not a common scenario.
However, you should be able to do something using the Debugger API, creating an add-on for Firefox Mobile. But I don't know if it's worthy.

Is it possible to open Internet Explorer window from Firefox? [duplicate]

Our Web application is based on IE9, which means only IE9 can open the pages in our site. We'll prevent user to browse our site when their browser is not IE9.
But sometimes we had to send a link to user's email box to complete some actions and they will open the link directly with their default browser, the problem is here, if the default browser is not IE9 then they can't open the link, they have to copy the link to IE9. Our user don't want do this manually, they want open the link in IE9 directly no matter what the default browser is.
I have tried using ActiveXObject, but it only works in IE. I want have a script which can open IE browser in Firefox/Chrome page.
It sounds like you want to have a link in an email that activates a specific program on the user's computer rather than the program that they've identified should be used (e.g., their default browser). I don't believe you can do that.
You can install "protocol handlers" in both Chrome and Safari (I suspect Firefox as well), which would let you send a link like ie://example.com/path/to/app. Your protocol handler would launch IE and take you to the relevant site. (Apple does this with iTunes.) But your users would have to install the handler (and, of course, you'd have to write it).
An easier answer might be to have the users install any of the ubiquitous "open in IE" add-ons/extensions that exist for Chrome, Firefox, etc. They follow the link, then choose "open in IE" from some kind of menu. (If they're using webmail, they may even be able to right-click the link and choose that line item, depending on the extension.)
Side note: Obviously, though, barring it being impossible I'd recommend making your application compatible with Chrome and Firefox.
No you can't do it..
but there is some alternatives:
Install your users IE tab:
FireFox - http://lifehacker.com/135297/internet-explorer-in-a-firefox-tab?tag=softwarewebpublishing,
Chrome - https://chrome.google.com/webstore/detail/hehijbfgiekmjfkfjpbkbammjbdenadd
Use a batch file that will launch your link in explorer.
use this Firefox plugin makes it possible to use (host) ActiveX controls in Firefox - http://code.google.com/p/ff-activex-host/
instead of ActiveX try using Netscape Plugin Application Programming Interface (NPAPI) - a cross-platform plugin architecture used by many web browsers.
Similar as with a batch file, you may create a link file to the page you need using the ".website" file extension with IE, which is configured in windows by default to open with ie. Put it in your webserver public folder and then add a link to that file in your website
You don't have to write code to create a custom protocol handler in Windows. See this page for how to define one in the registry.
You can use User agent switcher for chrome or firefox
For Chrome :
https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg
For Firefox :
https://addons.mozilla.org/en-US/firefox/addon/uaswitcher/

How to create web app shortcut on user's desktop programmatically?

For enterprise intranet web application, is there any way to create a desktop shortcut of web application on user's desktop? I'm looking for functionality similar to Google Gears, but without installing Google Gears. I'm looking to give user's a link on web application that says "Click here to install desktop shortcut", when they click on it, a desktop shortcut is installed with the custom icon for our application. Is there a way to do it using javascript or any other client side technologies? I don't want to run any exe on user's machines. Even though it's intranet, I have to jump through lot of corporate hoops, compliance approvals, etc to run exe on their machine. We are trying to avoid that, due to time constraints. User machines are windows XP with IE6 installed. They may all upgrade within next year's time to Windows 7 with IE8. Intranet web application in question is developed using asp.net 3.5, c#.
If this is really a corporate environment then just go talk to the network operations team.
It should be trivial for them to add something to the login script to push this link to the people's desktops.
More Info:
http://www.petri.co.il/forums/showthread.php?t=6154
http://social.technet.microsoft.com/Forums/en/winserverGP/thread/02a7bfbb-180f-40eb-82e3-2343b2bf31eb
Alright, at first I thought that this was an impossible task, until I realized that it's not.
A shortcut is just a file, and we all know you can download files from links.
I'm not sure how well windows shortcuts can be transferred from computer to computer, but I would assume that a shortcut with a location like http://www.google.com/ is not tied to any specific windows machine.
You could zip the shortcut, and point the link to the location of the zip file. Tell the users to unzip the file and place the shortcut. You may be able to just serve the shortcut, but you'd have to give the right headers, and probably specify application/octet-stream or something like it.
Alternatively you can tell them to right click, go to new -> shortcut, and copy-pasta the url into the location box.
Alternatively you could write a batch file for the users to download that opens a url in the default browser.
I know it's not quite as direct as click-button -> receive bacon but it will work.
Try looking at SaveAs
document.execCommand("SaveAs", false, "url to desktop");
The user will still have to click save and it only saves a HTML page. You would have to open a hidden IFrame containing a web application and call .execCommand on the iframe's document.`
You can create a shortcut (.lnk) file in a directory in your site and put it as the Url for a hyperlink so the users right click and save as they download the .lnk file. Your server will need the mime-type .lnk application/x-ms-shortcut adding.
The icon can be done by putting it on a network location and using the "Change icon" function to refer to this network location. This works on Windows. I suppose it could be adapted for each OS required?

Categories