How to open a new window on iphone's standalone (fullscreen) mode - javascript

<!doctype html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<script>
function goToPage() {
var pageUrl = 'http://www.google.com/';
window.open(pageUrl);
}
</script>
<div id="installBtn" onclick="goToPage()">go to page</div>
</body>
</html>
The expected action is: when touch the div, a new window opens.
This code works great in the iPhone's safari.
But when I tap "+" -> "Add to Home Screen", and press "go to page", no window is opened, and the page loads in the same screen.
How to force, by javascript, a new window to open in the standalone mode?

The below question does mention a possible JavaScript solution out of the top voted answers, which constructs the anchor element and dispatches the 'click' event on it.
Question: Force link to open in mobile safari from a web app with javascript
Answer: https://stackoverflow.com/a/8833025/1441046
Alternatively if you can use an anchor element (I know you asked how to do it in JavaScript) you can do the following:
<a id="installBtn" href="http://www.google.com/" target="_blank">go to page</a>
Other related questions:
iPhone window.open(url, '_blank') does not open links in mobile Safari

This works for me. Doesn't work when requesting it from html, only from JS.
window.open('[url]','_system');

you can use childbrowser to open in the standalone mode
Or you can use this
window.location = url(your Url);

There you go! (if you still need it)
<script>
if(window.navigator.standalone === true)
document.write('Standalone');
else
document.write('Web browser');
</script>
R.

Related

Window.print() not working in ipad chrome in popup window[window.open()]

Below is my piece of code that work's in all the browser in all the OS, except ipad chrome. Help me out here.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
function myprint() {
const wnd = window.open('about:blank', '', '_blank, alwaysRaised=yes');
wnd.document.write('<html><head><title></title>');
wnd.document.write('</head><body>');
wnd.document.write('<div>JavaScript often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm.</div>');
wnd.document.write('<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>');
wnd.document.write('</body></html>');
wnd.document.close();
}
</script>
<body>
<button onclick="myprint()">popup</button>
</body>
</html>
Here Im trying to open my content using window.open() then print them using window.print(). That's all. jsfiddle
This link also not working in ipad chrome.
Print
This is an issue with Chrome on iOS. Because of Apple’s policy on third party browsers, Chrome is actually just a WebView component. Printing is currently not supported. As far as I am aware, there is currently no workaround for this issue.
Try this code, if it not works another solution is to use a third-party printing service like this: http://www.printfriendly.com
function goPrint(){
window.print();
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
window.location.reload();
}
}
You are using a backtick character ` in this line:
wnd.document.write(`<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>`);
This is a Templated literal and might not be supported. Try replacing it with a single quote:
wnd.document.write('<div class="print-header"><button title="Print" onclick="window.print()">Print</button></div>');

Benalman Js does not working in Ipad. hashchange

I using Benalman JS to control the back button window redirect url to home.
I tested in normal browser and Android phone, it work accordingly.
But it does not work in Ipad,
here is a part of the code.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
// control back button
// includes in js mean contains
if(!window.location.href.includes('#state')){
history.pushState(null ,document.title, '#state'); // forwards
}
// Bind an event handler.
jQuery(window).bind('hashchange', function(e) {
window.location = _contextPath + "/home/";
});
</script>
</html>
I notice that in Ipad the url will not append the "#state".
I suspect history.pushState not work in Ipad.
How can I fix this?
Thank you
The problem fixed after I change
includes
To
indexOf
Nothing to do with Benalman Js library. This js can excluded.
Thank you.

Page scrolls to top when closing modal using back button in mobile Safari

This is potentially a somewhat oddly specific question.
The situation:
I have a page with a position:fixed modal dialog (actually several, but that's irrelevant to the problem, as far as I've been able to determine). The modal opens when clicking a certain link. A script listens for hashchange events in order to close the modal when the user hits the back button.
The expected behaviour is that when back:ing out of the dialog, the page returns to the scroll position where it was before opening the modal. This happens in nearly every modern browser I've tested (desktop FF, Chrome, IE9/10/11 and Safari, and Chrome for Android).
On iPhone/mobile Safari, the page instead scrolls back to the top.
Test code
This is as reduced as I've been able to make it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html, charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modal test</title>
</head>
<body>
<h1>Header</h1>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling</p>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<h1>Header</h1>
<p>Open popup</p>
<p>Enough<br>content<br>to<br>cause<br>some<br>scrolling<br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<div id="#popup" style="background:#fff; width:300px; height:100px; border:2px solid #000; position:fixed; top:50px; left:50px; display:none">
Modal dialog.<br>
Hitting 'back' should close this modal.<br><br>
Close modal
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('.js-close-popup').click(function(ev){
window.history.back();
return false;
});
$('.js-open-popup').click(function(ev){
$('#\\#popup').fadeIn(400);
});
});
$(window).on('hashchange', function(){
hash = window.location.hash.replace('#','');
if(hash == '' || hash.lastIndexOf('#', 0) !== 0){
$('#\\#popup').fadeOut(400);
}
});
})(jQuery);
</script>
</body>
</html>
What I want to do is kill the scroll-to-top on iPhones, if at all possible without changing too much of the back-button logic for the popups (or breaking something in any other browsers).
I've searched SO for X number of hours but haven't been able to find a mention of this particular problem, or indeed a solution that works. Feel free to slap me on the fingers and point me in the right direction if I've missed an existing thread that answers my question.
EDIT: To clarify, opening the popup works as expected and does not cause any "auto-scroll".
This is definitely related to having "#" for "a href" value in your code. Also, I see a "##" in your code for a name of the ID, which i believe the reason for this. Try using some other name convention. When you are writing ID's, you don't need to give "#" in the HTML code. Try working on these lines, it might work for you.
Thanks!!

jquery mobile for BlackBerry z10 image link zooms

I'm developing a mobile app for BlackBerry z10 with jquery mobile for BlackBerry 10. I used an image as a button, but when I double tap the image, the whole app zooms.
This is the code I used:
<img src="images/buttons/page1.png"/>
but the other images are not zooming at all (image with no links).
What seems to be the problem while I'm having this code here:
<meta name="viewport" content="user-scalable=0, initial-scale=0.45, maximum-scale=0.45, minimum-scale=0.45, width=device-width, height=device-height" charset="UTF-8"/>
Can anyone help me to get rid of this.
Thanks in advance.
This is one method that I found, Please check it:
<meta id="viewport" name="viewport" content="width=device-width, height=device-height, user-scalable=no/">
Another method would be:
<script>
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
Try using a virtual click event. Maybe it is because the click event is meant for mouse click, and the BB Z10 is a touch screen device where you tap to select something.
<img src="images/buttons/page1.png"/>
$("#show_something").on("vclick",function(e){
// show something code
e.preventDefault();
});

How do I hide the address bar on iPhone?

How do I hide the address bar on iPhone?
I tried two different methods so far:
The scroll down one pixel trick with JavaScript on page load
And the following meta tags:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
Also this:
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
I am completely confused.
PS: Oh, I forgot a really important thing: the web page itself does not overflow the browser window. It probably is the reason why the 1 pixel scrolldown trick does not work.
I can't make it bigger, since the hit thing about the design, that everyone can scroll, but this page folds... :)
I just hit this myself. If the address bar is not hiding, the reason may simply be the page is not long enough to scroll.
When the
window.scrollTo(0,1)
is called the page MUST be longer than the window so a scrolling event can occur.
Only when the scrolling even occurs will mobile safari hide the address bar.
🔴 UPDATE: Apple removed support for minimal-ui in iOS 8 so this is no longer a useful answer :(
For new googlers looking into this: As of iOS 7.1 there's a new minimal-ui mode that works on mobile Safari:
It's enabled by setting the minimal-ui property on the viewport:
<meta name="viewport" content="minimal-ui">
You can also use it in conjunction with other properties like so:
<meta name="viewport" content="width=device-width, minimal-ui">
Of note, there's no minimum content length requirement as there is with the scrollTo hack. There's a great overview of this new mode here. (That's where the above image comes from.) He also lists some shortcomings.
The only official documentation I could find on this is a note in Apple's iOS 7.1 release notes:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
For example, use <meta name="viewport" content="width=1024, minimal-ui”>.
Of course, since this only works in iOS 7.1 and above, it's usefulness may be limited.
Unless something has changed in recent iOS versions, the scroll down trick is the only one that reliably works, I've had no issues with this version:
/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);​
I didn't care about any other mobile platform for this particular page though, it was redirecting based on agent...you may want to change the regex to check for iPhone specifically, e.g. replace /mobile/ with /iPhone/.
I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.
/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
You can run the function when the site content is ready instead of using timeout
addEventListener("load", function() {
window.scrollTo(1, 0);
}, false);
Try:
setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...
In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.
I had this in my CSS
html{position: relative; height: 100%; overflow: hidden;}
This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.
I have been searching around on this full screen web app as well and i found this.
http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/
Basically you need add the following in your header:
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
//App name
<meta name="apple-mobile-web-app-title" content="App name" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
//APP ICONS
<link rel="apple-touch-icon" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">
<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">
Open the site in Safari
Tap on the "Open with" icon ( arrow pointing upwards and box below it) beside refresh button at the URL bar
Select "Add to home screen"
Go to the homescreen and open the "App name"
Voila! website with no URL bar or navigation buttons!
<meta name="apple-mobile-web-app-capable" content="yes" />
iPhone Configuring Web Applications
I think it will never be solved unless the content is more than the browser window.
Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).
if( !window.location.hash && window.addEventListener ){
window.addEventListener("load", function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "orientationchange",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
window.addEventListener( "touchstart",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
}
<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes">
This is used for adding a ios web app to the homescreen without the searchbar.

Categories

Resources