CODEWITHSUNDEEP
javascripthtmliosangularjsionic-framework
Psylence
Psylence

Reputation: 81

Ionic framework makes 'open in new tab' option unavailable for ng-href in ios devices

I am trying to achieve a functionality in mobile devices where tap would open 'codepen.io'(handled by ng-click) and tap and hold would open the context menu with 'Open In New Tab' option in it, which leads to 'stackoverflow.com'(handled by ng-href)

Here is the code: HTML:

<head>
  <link href="https://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/nightly/js/ionic.bundle.js">    </script>
</head>
<body>
  <div ng-app="myApp">
    <div ng-controller="MainController as main">
      <a ng-href="https://stackoverflow.com/" ng-click="$event.preventDefault(); main.getUrl()">The Link</a>
    </div>
  </div>
</body>

Controller (AngularJS 1.4.9):

(function() {
  'use strict';

  angular
    .module('myApp', [])
    .controller('MainController', MainController);


  function MainController() {
    var vm = this;

    vm.getUrl = function() {
      window.location.replace('https://codepen.io');
    }
  }

})();

$event.preventDefault(); was added to ng-click to prevent 'href' from overriding ng-click on tap and loading the wrong url.

I have issue achieving the functionality in ios devices, where no context menu was opened on 'tap and hold' in ios devices before Iphone X.

If you remove the ionic framework source from the head tag, the code works in ios devices. However, I am using ionic framework for my angularJS application. So it can't be avoided.

Is there a way to achieve 'open In new tab' option to be available in ios devices with ionic still there?

Here is the codepen link : demo

Upvotes: 3

Views: 83

Answers (1)

Sarath K S
Sarath K S

Reputation: 114

In your code, -webkit-touch-callout property may be none. Rmove that or add the following style, will resolve this issue

body {-webkit-touch-callout: default !important;}

Upvotes: 2

Related Questions