I'm quite new of Android and during the development of one app, I have encountered the following issue:
I'm using a WebView inside my app for viewing web sites (it does not matter what kind of site, can be Google or Reddit or anything else). I know I can use a "browser Intent" with Intent.ACTION_VIEW but for the purpose of my App I must use a WebView.
So, I have enabled javascript and DOM api storage with:
getSettings().setJavaScriptEnabled(true);
getSettings().setDomStorageEnabled(true);
My problem comes after that the page has finished loading and some Javascript automatically starts. Basically if the user has already scroll down and the Javascript tells the page to hide/show some content (example a DIV) the scroll resets to top.
My question is:
how can I avoid this behavior? I want that the Javascript loads correctly but it does not interfere with the user's navigation. Is that possible?
Thanks in advance,
Best A.
Related
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.
I am the developer of Boxy, a famous native wrapper around Inbox by Gmail, and wanted to ask if anyone is able to help with something I have been struggling with since day one of development.
Here is the problem: links on inbox.google.com and gmail.com work differently than on other sites: clicking on them does not trigger a navigation action on my webview (I am using a WKWebView specifically, but the problem is also present using the old WebView). So I am having a difficult time opening links in an external browser when appropriate.
Because of this, at the time of this writing, I am relying on a terrible hack in order to open links: intercepting clicks on the document.body with javascript (using an event listener) and then forcing them to open on the external browser by calling the native app.
My best guess is that the Gmail/Inbox apps perform some javascript magic in order to track clicks on all the links inside emails and that, somehow, this interfers with the standard behaviour.
Has anyone got any idea how I can solve this problem?
Things I already tried
Implementing the method -webView:createWebViewWithConfiguration:forNavigationAction:windowFeatures: of WKUIDelegate. Did not work: the method is called but the request associated with the navigation action is empty.
I found a solution. This issue is due to when clicking link, instead of opening using target=_blank, Gmail attempts to open an about:blank window and then run javascript to redirect the link.
You need to make sure that Gmail can correctly receive the handle of the created window.
- (WKWebView *)webView:(WebUI *)webView
createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration
forNavigationAction:(WKNavigationAction *)navigationAction
windowFeatures:(WKWindowFeatures *)windowFeatures
You need to make sure this delegate method correctly returns the newly created wkwebview.
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.
I'm working on my first jQuery Mobile site, which is a (prototype for) a Location Based Game in Brisbane, Australia: www.jsjensen.dk/soleil/
My question is based on viewing from a mobile device, but a desktop device have very similar problems. I have tested with Chrome and Safari on iPhone, iPad, and Mac. Same problem everywhere.
I think it's related to how jQuery Mobile loads and displays pages, but I'm not using multiple pages in one HTML document, but have multiple HTML document.
If you go to the website above and then click "QUESTS" in the menu, followed by "Stairway to Knowledge" you will end on /soleil/quest01.html (desktop) and /soleil/#/soleil/quest01.html. That "#/soleil" really confuses me!
In this first try the JavaScript for handling answers in the text input is not loaded. That means nothing happens when you press "Unlock".
Now, if you reload on desktop or edit the address on iOS to /soleil/quest01.html (which is the actual and real file) it will reload the page with the right JavaScript loaded and initialized.
Now I'm able to go back (pressing "QUESTS" in the menu) and then go to another page (e.g. "Citadel of Fun") with the same problem: the JavaScript not loading. If I go back to the other one ("Stairway to Knowledge") the JavaScript is, however, still loaded and working just fine.
So what happens here? I'm pretty sure my linking/coding is correct, but it's just a basic understanding of jQuery Mobile that I'm missing. Can I change something to make this work? It could really be awesome!
So, I found a way to fix it, but not really a solution to the original problem.
I've added rel="external" to the tags pointing to the pages where I had problems. In this way it will not use the AJAX system to load these pages, but do it in a regular way. This solved my problem, but now I can't make any fancy transitions.
I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian
Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.
If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html