我正在尝试在移动设备中实现一项功能,其中点击将打开“codepen.io”(由 ng-click 处理)并且点击并按住将打开带有“在新选项卡中打开”选项的上下文菜单,这会导致“stackoverflow.com”(由 ng-href 处理)
代码如下: 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();
已添加到 ng-click
以防止“href
”覆盖 ng-click
点击 并加载错误的 url。
我在 ios 设备中实现该功能时遇到问题,在 Iphone X 之前的 ios 设备中,在“点击并按住”时没有打开上下文菜单。
如果您从 head 标签中删除 ionic 框架源代码,代码将在 ios 设备中运行。但是,我正在为我的 angularJS 应用程序使用 ionic 框架。所以这是不可避免的。
有没有办法实现“在新标签页中打开”选项以在 ios 设备中可用,而 ionic 仍然存在?
这是代码笔链接:demo
最佳答案
在您的代码中,-webkit-touch-callout 属性可能是none。 Rmove that or add the following style, will resolve this issue
body {-webkit-touch-callout: default !important;}
关于javascript - Ionic 框架使 'open in new tab' 选项对 ios 设备中的 ng-href 不可用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53533898/