How to ink to another .html page within Chrome extension/app? - javascript

I am building a chrome app for a client that will run in kiosk mode to display in their stores. Right now I have an index.html page that links to about 30 other pages. However, when I click on a link in the app I get an error...
Can't open same-window link to "chrome-extension://leghflngpfmomcflabikghiemaajadne/poweredge"; try target="_blank".
So I tried target="_blank" and that tries to open it in a new chrome window.. no good. I've been reading a little bit about using webview and sandboxing pages but they both open the pages in a new window and it just doesn't look good.
Is there a better way to do this? Right now my only idea is to place all of the content on the index.html page and turn on/off sections of the content with jQuery. I'd love to keep all of the pages separate though, just for my own sanity.
Thanks!

Navigation is disabled for the Chrome Apps platform. In theory you are supposed to make single-page apps - so your turn on/off approach is the "intended" one.
No-one stops you from having several windows though - suppose you have an options page, it wouldn't be strange to open it separately (via chrome.app.window.create)
As stdob mentions in comments, a workaround may be possible by using <webview> with a partition blessed to show local resources. It's not clear though if it will allow access to apps APIs.

Related

Solution to open/load multiple external link in react based web-app which is available as PWA in iOS?

I'm building react based web-app which is available as PWA in iOS. I have done so much R&D to solve my problem, but ended up with nothing. If anyone can help, it would be appreciated, let me explain the problem in detail:
In my web-app (PWA in iOS), there's a dashboard where list of external links are available, when you clicks on any link, it opens that link in in-app browser rather than a mobile's native browser. The reason why I want this is...
As I said there are list of applications, so, for example, let's say I'm clicking on link-1, the PWA opens the in-app browser, I'm login into that web-app, doing some work, then coming back to dashboard (PWA), and clicks on another link-2, it opens that web-link in in-app browser again, I'm login into that web-app, doing some work, then coming back to dashboard, now, when I'm clicking on link-1 again, it opens that in the in-app browser, and I have to login again go into the page I was on and do my work. This is little frustrating for user to having login again and again.
As I said these are external application, which means I don't have control over it, so can't store the token and pass it again when user clicks on the link.
I want somewhat like browser like experience where in, user does not lose his progress, even if he has opened multiple links from the dashboard, he can easily switch between the tabs.
The solution that I tried so far:
Open directly PWA of a link that I'm trying to open when click on link
(the iOS doesn't support this yet)
Open the mobile's native browser
(though business doesn't want this, as it's not good experience as user have to switch between PWA and browser, but still this is the only solution I can see)
(I tried window.open, _blank, but no luck with that in iOS, though it works well in Android)
Tried many solutions like: rel='external', _blank options, etc.
(but no luck so far.)
Tried loading external link in iFrame
(Due to security reason, it refuses to load external link)
I'm open for any solution that can fulfill my need. Even if you don't know the answer, please do like the question, I'd really appreciate your help, thanks in advance!
Looking forward hear everyone's thought on this.

LINE's "add friend" bottons on webpage disappear if the webpage is delivered via Cloudflare proxy

Our website has been serverd via Cloudflare proxy for a long time and everything goes well. Recently we wanted to place social media buttons on the webpages, we have buttons for LINE and for Facebook. Buttons of both social media work normally when tested in localhost. However, when the page is updated to the production environment, we find that LINE's buttons do no show and only Facebook's is viewable. Later we found that by turnning off Cloudflare's proxy LINE's buttons appear! This issue is illustrated in the figure. It is also confirmed that if we put the page in another server where pages do NOT go through Cloudflare proxy, LINE's buttons can be seen normally. The buttons are embedded to the webpage using simple html and javascript.
We do not want to turn off Cloudflare proxy for good just in order to show the the social media buttons, but we have no idea about how to prevent LINE's buttons from invisible. Could you please help pointing out what is the key we missed? Thank you very much!
It would be worth checking if you have specific Cloudflare features enabled which may affect the execution of 3rd party Javascript code:
Check "JS" Auto Minification in the Speed options (documentation)
Check Rocket Loader and if enabled, try disabling it (documentation)
Typically (1) is very unlikely to cause any issues. You should also check and share if there are any errors in the browser developer console, or with loading resources in the two scenarios - this would help finding a root cause.

iOS 11 - standalone web app link opening default reversed? (Handling PDF display in web app.)

There was a lot of traffic about preventing a link in a standalone web app from opening in mobile Safari, but the iOS versions quoted were much earlier (7-9?). In iOS 11, I'm having the opposite problem: in my standalone web app, I have links to PDF files that need to be displayed. When I click on them, they open inside the web app browser instead of inside Safari, no matter what options I have given. Because of standalone mode, the result is a dead-end in the web app that requires restart of the app. (Android seems to do the right thing and pass off to a pdf viewing app.)
Click handler (javascript/bootstrap/jquery):
function openDocument(docURL) {
window.open(docURL,'_blank');
return false;
}
Alternatively, can one turn on the navigation inside the web app for the new page so that I can avoid the dead end? (I think no from what I'm reading; I've tried some options to window.open to no avail.) Or is it possible somehow put together a (multi-page) pdf viewer and a UI element for dismissal? Suggestions welcome.
EDIT: summarizing discussion below, iOS handles internal vs external links differently in standalone web apps. Making the links appear to be external by remapping on the server side allows the link to force Safari to open.
HHave an iFrame or a DIV in your page and load the PDF inside that component. Have a back button top of the iFrame to avoid dead end.
<iframe src="https://example.com/mypdf.pdf"
width="match your parent element" height="match your parent element" >
You can see one more option here to embed PDF.
Update: If you open the PDF form a different domain or sub-domain, it will be opened in a separate window even in iOS. Say your PWA URL is https://www.example.com/myapp and if you are currently accessing pdf from "https://www.example.com/myapp/pdf/mypdf.pdf", set an alias for this URL like "https://www.pdf.example.com/myapp/mypdf.pdf".
If the domain or sub-domain changes in a PWA, it will be treated as an external link and will always open in a new window and not inside the app leading the the dead end. You can try this if the CSS hacks are not good enough.

Preventing iOS mobile browsers from forcing open apps when clicking links?

I have a website which contains links to external websites, for example amazon product links. The links work just fine, but when I test my website on mobile (iOS in this case), I noticed that clicking the links in the mobile browsers would force open the Amazon app rather than just opening a new tab.
The links in my html are as follows:
I want to have these links open in the browser only, not in their respective apps. Is there any way in to prevent this behavior using html / javascript? Thanks!
No, you can't.
The reason is: you should not be able to impose your choice on the user. Maybe the user prefers the app? That's why iOS 9 introduced the app switcher on the top left hand corner if you switch apps.
Also, let's look from the other side of things if you are the app developer: If you go so far as to build an app and allow universal links (or generally deep links), you obviously would like the user to use that feature and rather open the site in the app. But again, you cannot force the user into opening that link in the app. That's a good thing, because it all depends on what the user wants to do and how he wants to do it.
Having the user choose is the best way to handle this from a UX point of view.

show browser preferences & Page Setup using javascript

Is there a way to use javascript to activate the preferences dialog, so that a user can change a proxy address if they need to & also be able to click on an anchor link and have the Page Setup Dialog open, so that they can choose the page orientation for printing.
The reason for this, is becuase I am trying to use mozilla Prism to deploy a web application, but I have hidden the Navigation Bar & Status Bar(which contains the Prism's button for setting these preferences). I want Prism to be just a frame.
I have not posted in Prism discussion forums, becuase maybe there is standard javascript way of opening up these dialogs, can you(anyone) share how if it is possible. A firefox workaround will be enough, since prism is based on Firefox. Thanks.

Categories

Resources