Drag Link From Browser Address Bar To JavaScript App - javascript

I have a Web Desktop Bookmarking site and I want users to be able to drag and drop the Site Icon from the browser bar to my JavaScript App in another tab. This works nicely in Chrome (if you try), but I'm not sure what the code is to accept the drop event and read the url from the link dropped in.
A quick look at my site would give an idea how this added functionality would be a useful feature. Booky: Your Personal Bookmark Web Desktop
How do I do that?

Related

How to open a browser app which is listed in chrome://apps

Chromium-based browser has the apps page at chrome://apps
There are some apps that I have installed into it. Is it able to launch one of them from JavaScript somewhat just like opening file selecting box?
I can open chrome://apps by setting this URL in to a link, but how about a single app?
Copied from: Open Chrome in a new window (Chrome app)
Sadly, there's no way to do that I know of.
Using window.open in an app's context is a bit of a hack, but results in the URL being open in the user's default browser (not necessarily Chrome). There's no control as to how the browser chooses to open it.
There's a Chrome App-specific API that was created specifically with "open a page in Chrome" in mind, chrome.browser. However, it still doesn't provide an option to open in a new window.
The closest you can get is to create your own "browser": an app window with an in it. Then you have full control over the presentation, but it's not integrated with Chrome's profile and may require additional work to implement things like dialogs and browser controls. See the Browser sample app and documentation.
You may need the app id which you can then append to the URL. I am not entirely sure how you would find but if you go to the apps page on chrome, drag the icon of the app to the search bar in the browser, you should get the full link.
For instance, I dragged the Google Slides Icon onto the search bar and it gave me this url chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html. So, you may give it a shot! Try to open the chrome apps page, then drag the app you want to open in new tab onto the search bar.
Hence, using Javascript:
window.open("chrome-extension://aapocclcgogkmnckokdopfmhonfmgoek/main.html", "_blank");
Opens Google Slides App in a new tab.

Opening links in a PWA without showing the url?

I've found some similar questions but none that address my particular use case, I have a PWA written in Angular that displays a menu with external links. For example I might open the PWA and see a menu with an icon for Stackoverflow, Github and Reddit. When I open these links they open in a knowdown version of the browser I am using and for some users in a seperate browser instance altogether.
Would it be possible to hide the URL bar at the top of the screen? My goal is to hide the URL from the user if possible. Before I was using an Android app that was just a webview and that worked great but turned out to be impractical for the use case.
A solution that involves whitelisting domains will not work as I do not know which domains will appear on the links menu.

How to hide Address bar of a responsive webapp when opening through mobile browser?

I have a responsive webApp which is accessible from both Web Browser and Mobile browser. I want to hide the address bar once the application loads and this will continue in every other page of the application so that it feels like an APP. Can it be achieved through Javascript?
Well if you are planning to add some extra config in your responsive web app, then you can do it. Take a look at Progressive Web App. In this type user have the option to "Add to homescreen" for any mobile device. Then the address bar will be hidden for this kind of app.
The main thing you have to add in the Manifest.
Hope this helps.
If by 'address bar' you mean the top bar where you enter the website url, then no: you cannot modify the appearance of the browser just by javascript.
You used to be able to open a window without the address bar through javascript, but for security reasons that is no longer possible as users should be able to see on what domain they're on.
Most mobile browsers already have this kind of behaviour by the way, where they hide the address bar once you're scrolling the web page...
You can set your website in full screen mode using this method your address bar will hide automatically.
You can set browser as full width using JQuery OR Meta Tags, Please refer this link.
It will help you.
Thanks

Allow users with a buttons to change the web site viewport size as per device dimension

First see the web site template http://thevectorlab.net/theme/?theme=Admin%20Lab
this web site template made a provision to resize the site at run time for desktop mobile and tablet when click occur on relevant buttons. see the link and see there are few button at top left where user click to resize the site and see how web site look like when user visit the site from mobile or tablet, desktop etc.
suppose i want to develop a site where i will provide 3 buttons where user click and my web site will resize at run time for desktop mobile and tablet. so user can see and feel how the site look like when user visit the site from mobile or tablet, desktop etc.
so tell me how could i develop such dynamic resize functionality with multiple button when user click on any. thanks

How do I add an "Add Favorite" link to my mobile site?

I'm building a mobile site and the client wants users to be able to click a link on the site that adds a link to the site to the user's home screen on their phone.
Is this possible?
Yes. It is possible. Many browsers allow this functionality.
You need to use the Browser's API to add that link to the user's home screen. Otherwise using the HTML or JS it is not possible.
I hope you're talking the way Chrome adds a hyperlink to the screen, then you need to learn how the browser does so. For that please read the dev documentations. Their is no such option in HTML, you need to learn the OS dev docs and as well as Browser documentation.
Google Chrome:
https://developers.google.com/chrome/mobile/docs/installtohomescreen

Categories