I have a web app. The web app is added to home screen on iPhone. I have many external resources(Links) in my web app. Every time a link is clicked, it opens the web browser because target is set to _blank and there is no way for the user to go back. is it possible that the user will be able to open any of these resources without leaving my web app?
I was thinking of doing the following:
creating an iframe and have the links open within that iframe. I am hoping that there is something better out there.
If you still not sure what is it that I want?
a good example would be, if you look at facebook's native app for iPhone when you click on an article that someone posted, it opens the link within a frame that allow you to go back to your last page. In other words, you never leave their app. I understand that it is a native app and it is completely different but I believe that with JQuery Mobile or just JQuery it is possible. Am I wrong?
Related
I'm worrying that I won't get any reply from stack overflow, because I couldn't get any reply from previous question. You don't need to fully read previous question, but It could be helpful to understand my question.
Our company is on service that html document builder(windows application) and I'm a desktop s/w engineer. after build html document with our windows app, we export all things to html/js/css.
Consumer of our application is a designer who creates or edits contents via our windows app. and the end-user of contents which is created by designer see contents via browser(chrome, safari (iphone), samsung browser).
The Problem is, my superior (programmer) wants use java-script as a navigation, this is possible. but, he want to save all state of document state before navigation, so after navigation to any page and then comeback to origin page, all state - animation (contents may have animation) and all script state - should be same exactly before he leaving origin page.
More specifically, main html has a iframe, and iframe can shows all contents. Main.html have a navigation button so iframe can navigate all contents created by designer. If user interacted with page1.html inside iframe, then make iframe to change its content to page2.html by clicking navigation button (go to second page button implemented inside main.html but outside of iframe). and then back to page1.html, he get exactly same state as before he leaving page1.html.
At a glance, It seems quite possible just implement go-forward or go-backward, but dynamically paging navigation is impossible to me. I found some techniques - access browser visit history and window.history object, but It seems there isn't user-defined way.
I thought Electron app(desktop) will be fine for our solution, but my superior says It should be works well with just html/js/css. Our final product should be shown in desktop, iPad, mobile or any device that handle web browser.
I need technical advice to accomplish this issue, I'm fine there is no way to control navigation while saving document state. Help me please.
Document state can be saved by using localstorage object in javascript.
So I am running an ad and I need the potential customer to reach a very specific page. However, when clicking on the ad, it redirects to the mobile app, therefore breaking the path I want the user to take.
Is there a way to add some code that will always direct the user to the mobile browser version rather than the app if they have it installed on their smartphone?
I had a look around but all the solutions find how to bring the person to the app. I want the opposite.
make the link in your ads different from that which you need to open in app
like example.com/add and other links as example.com/* and in regex trying do something like this /^((?!example.com/add).)*$/s
I am newer to JavaScript and I am working on a website where I want to be able to switch the URL when I click on certain elements of the site without reloading the page.
I want it to work like http://www.itemcycle.com when you click on the link to sell your iPad or iPhone and then select your model. It shows different boxes, and when you click on them, it changes the URL but I know it's not loading a new page because it doesn't scroll me back to the top.
Thanks in advance for your help!
what you are seeing is a single page application
A single-page application (SPA), also known as single-page interface
(SPI), is a web application or web site that fits on a single web page
with the goal of providing a more fluid user experience akin to a
desktop application.
It will be achieved by using certain JS frameworks. AngularJS is the popular one.
Try this:
window.location.href="/yourUrl";
HTML5 introduced the history.pushState() which allows you to add and modify history entries.
window.history.pushState('page1', 'Title', '/page1.php');
This might worth looking.
There's 2 main ways to redirect a user, each with it's tradeoffs:
You can redirect a user to a new page by changing the value of window.location.href. So for instance window.location.href='https://example.com'; will redirect a user to https://example.com. Note this will do a hard page reload, so the page will actually reload.
To change the url path without redirecting the user to a new page you can do use history.pushState. Doing something like:
history.pushState({}, "page 2", "/page2");
will change the url from https://example.com to https://example.com/page2 and the scroll position won't change. You can then listen to changes from history.pushState and update the page accordingly giving you effect you're looking for. Note you cannot change the domain (i.e. you can't go from https://example1.com to https://example2.com), but on the plus side the page will not actually be reloaded.
As others have pointed out there are various frameworks which allow you to do this type of thing, but those frameworks are making use of the techniques I've described above.
I'm building a small website that will be always be viewed on an iPad, I am using the meta tag:
<meta name="apple-mobile-web-app-capable" content="yes">
And adding the site to the homepage to force the iPad to treat it as an app. This eliminates the address bar and back buttons etc...
I have the site inside a frame set, initially the site will load up an index.htm landing page which has links to other pages containing <frameset>'s and <frame>'s. Each page has a navigation frame and a frame for displaying content. The content of the second frame will be an external webpage.
I had a problem where launching the site in app mode and clicking on the links in the landing page would result in a new window being opened in safari - essentially it would break out of the app context and load up safari, i resolved this with:
<script type="text/javascript">
$(document).ready(function () {
$('a').click(function (e) {
window.location = $(this).attr('href');
e.preventDefault();
});
});
</script>
Which keeps all links under my site loaded within the 'app'.
Now, here is the problem.
The frames that load the external webpages will obviously contain links, when clicking on these links in the frame this fires up safari and breaks out of the app context and the app goes back to behaving as it did before.
Is there a way of making sure that all links on the site open within the 'app', even those contained within the <frame> elements?
The overall goal here is to prevent the user from breaking out of the app and going off to do whatever they like on the net
I know you state that it's a website, but it seems like you're making something which resembles an app and I'm tempted to suggest using phonegap. http://phonegap.com/
The reason is, you're not going to be able to prevent the links opening in safari. Although Brainfeeder makes a good suggestion with loading external html into a div, but I think you're still going to have the same issue when users click links from external sites inside that div.
With phonegap all you'll have to do is create a new project, dump your code as it is into the www folder and straight away you'll have an app you can deploy to your iPad.
But the main thing which made me suggest this is a feature called inAppBrowser which will let you specify links to open in a foreground webview, so that when a user is finished viewing, they just click done and are returned to your app.
http://docs.phonegap.com/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
Appreciate it seems like a bit of overhead just to fix the safari issue, but might be worth considering.
I have a web App which has links to other web pages. When a user taps one of these links while the app is running from full screen mode the new page opens in full screen as well and so there is no means of navigating back to the web App. Has anyone found a method for escaping full screen mode on the iPad once a web App has been launched from a home screen icon ?
Try redirecting with javascript, like:
document.location='';
We actually consider this a bug, but as always there are those who would see this as a feature :)
If the page your going to is supposed to be in the app, then this solves your problem.
How can I open an external link in Safari not the app's UIWebView?
If the page is any page on the internet, then the answer is pretty much no.
Once you leave the app, there is no way back, except for the user clicking back on your app.
It is not simple to force the ipad to stay in your app. Some suggested methods:
Create your own web view in your app. If your using phone gap, or another framework, you would have to create a plug in to do this. You would then show the loaded pages on that web view, this is similar to how ads are shown & stay in the app.
Parse and replace all the links on the loaded page with custom events, and use a server to return the content, instead of loading it directly via the web.
Both are very complex, and have issues, like you cant have white lists if you let them browse outside specific domains.