I have this sample code for tracking if back button of the browser is pressed. The code works with IE , Firefox and Safari on computer. When I checked the code with Safari on Ipad, the .confirm dialog is not shown when I press the back button. I've tested with Safari 9 on iOS 9.3. Settings of Safari allows popup.
I have no idea how to make the code works on Ipad Safari. Has anyone same problem?
<html>
<head>
</head>
<body>
<script src="jquery-3.1.0.js"></script>
<script>
jQuery(document).ready(function ($) {
if (window.history && window.history.pushState) {
window.history.pushState(null, null, $(location).attr('href'));
$(window).on('popstate', function () {
$("#lblMessage").html("Onpopstate");
if (!confirm('Browse back?'))
window.history.pushState(null, null, $(location).attr('href'));
else
window.history.back();
});
}
});
</script>
<div id="lblMessage">Status
</div>
</body>
I created a test site here.
Related
I am very very new in Cordova (a few weeks), and building an iOS app, and I am trying to implement a code which opens an external url in the default browser, Safari. I am following a tutorial which says to "use the following as part of the startup code in your Cordova app":
window.addEventListener('load', function () {
$(document).on('click', 'a[target="_system"],a[target="_blank"]', function (e) {
e.preventDefault();
var url = this.href;
window.open(url,"_system");
});
//}
}, false);
How do I add this as a part of the startup code? Would it be a script tag at the top of the page? I tried that and got no luck.
Here is the link to the tutorial I am using: http://weblog.west-wind.com/posts/2015/Jul/02/External-Links-in-Cordova-for-iOS
The code you showed should be included with script tag as you tried. After that you need to add link element in your HTML and click that. So your index.html would look something like this
<html>
<head>
<script src="cordova.js"></script>
<script type="text/javascript">
window.addEventListener('load', function () {
$(document).on('click', 'a[target="_system"],a[target="_blank"]', function (e) {
e.preventDefault();
var url = this.href;
window.open(url,"_system");
});
}, false);
</script>
</head>
<body>
Go to Google.com
</body>
</html>
What the script actually does is that it registers itself as event handler for click event so basically it is called every time some link with target="_system" or target="_blank" is clicked. When it is called, it first prevents any other event handlers for it from being executed (e.preventDefault();). After that it reads the URL for the link clicked and opens that with the external browser (window.open(url, "_system");).
IN my Phonegap ios project i have an i frame and src of Iframe is a local html page within the same www folder . inside the html (IFrame source) one button and onlick listener. i need to open one website while clicking that button in InAppBrowser or in safari (new window). i cannot able to access phonegap methods from the html file (IFrame source), i includeed cordova on both html files, my source html page given bellow, this page is shown in an Iframe.
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="js/libs/jquery.js"></script>
<script src="adv.js"></script>
<script>
$(document).ready(function () {
$('#advArea').find('button').on('click', function (e) {
e.preventDefault();
var path = "http://www.google.com");
console.log(path);
//window.open(path,'__system');
//need to acces inApp Browser from here
})
});
</script>
</head>
<body>
<div id="advArea">
<button></button>
</div>
</body>
</html>
In your "parent" page where your iFrame is, create the below function
function popnew(path) {
navigator.app.loadUrl(link, { 'openExternal' : true });
}
then you call the above function for any button/link in the iFrame
<button onclick="javascript:parent.popnew('http://www.stackoverflow.com')"></button>
When I open a jQuery UI Dialog widget and the content in the dialog contains a textbox the dialog automatically closes when I press enter. This seems to happen only when using IE9 or IE10. I do not want the dialog the close when I press enter in the textbox.
I have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>Testpage</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myDialog').dialog();
});
</script>
</head>
<body>
<div id="myDialog">
Some text
<input type="text"></input>
</div>
</body>
</html>
When you open this HTML page the dialog will close when you press enter (only in IE9+). Any suggestions?
It looks like in jQuery UI 1.10.x the close button in the upper-right changed from an <a> to a <button>. Since this button doesn't specify a type attribute, it is considered to be type="submit". When you press enter in IE9+, the browser looks for a submit button, finds the close button, and presses it.
There are a couple of ways to work around this problem, I'd argue that the best way is to correct the type of the close button by overriding the _init function of ui.dialog:
var baseInit = $.ui.dialog.prototype._init;
$.ui.dialog.prototype._init = function () {
baseInit.apply(this, arguments);
// Make the close button a type "button" rather than "submit". This works
// around an issue in IE9+ where pressing enter would trigger a click of
// the close button.
$('.ui-dialog-titlebar-close', this.uiDialogTitlebar).attr('type', 'button');
};
If the dialog doesn't need to be autoopened, after the dialog has been created and before it's opened:
$("button.ui-dialog-titlebar-close").attr("type","button");
Also, if you have any button elements in the dialog html, be sure to explicitly include the type="button" attribute in them, or enter in the input control will fire an action associated with the button.
The different between IE9/IE10 and IE11 seems to be that ie9 and 10 activate on keydown, while ie 11 activates the submit button on keyup.
If you are handling keyup to take your own action, it will work on most browsers...except ie 9-10. Another solution is to override keydown, but be careful to still allow certain controls to get the enter key:
$(document).on('keydown', '.ui-dialog', function (e) {
var tagName = e.target.tagName.toLowerCase();
if (e.which !== $.ui.keyCode.ENTER) return true;
if (tagName === 'textarea') return true;
if (tagName === 'select') return true;
e.preventDefault();
return false;
});
I am working on a jquery mobile app, where i want to display the splash screen for all devices including the ipod, iphone, android mobiles, web browsers.
I have Tried below code:
1.)
<script type="text/javascript">
(function () {
var a; if (navigator.platform === "iPad") {
a = window.orientation === 90 || window.orientation === -90 ?
"_Startup_748x1024.png" : "Startup_768x1004.png"
} else {
a = window.devicePixelRatio === 2 ?
"Startup_640x920.png" : "Startup_320x460.png"
}
document.write('<link rel="apple-touch-startup-image" href="' + a + '"/>') })()
The above code is not working with android mobiles and web browsers.
2.)
<div data-role="page" id="splash">
#Html.Partial("_MobileHeader")
<div class="splash">
<img src="images/_Startup_748x1024.png" alt="startup image" style="width: 100%; height: 100%" />
</div>
<div data-role="content" id="pagecontent" data-theme="c">
#RenderBody()
</div>
<!--End content div -->
#Html.Partial("_MobileFooter")
</div>
and the script that i have used is :
$(document).on('pageinit','#splash',function(){
setTimeout(function(){
$.mobile.changePage("#pagecontent", "fade");
}, 4000); });
with the above code both of the div get displayed together i want to display only the splash screen first and then the content of another div.
Please suggest me possible solution for the above problem any help would be appreciated.
Thanks in advance.
I have fixed this issue as follows:
1.) Created an action that is the default action, called when the mobile app is opened at the very first time, and in its view page Set
the image which is to be displayed based on the orientation of the
device,which is done by jquery.
2.) And then to redirect to the another action Or the at the main page after this splash screen added the below line in the head
section:
<meta http-equiv="refresh" content="4;URL='the link which you want to call after that'" />
From this the image will be displayed for the starting 4 seconds as mentioned in the "content" and then redirects to the URL specified.
And it is working on all devices. :)
I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.