javascript - Ionic 框架使 'open in new tab' 选项对 ios 设备中的 ng-href 不可用

标签 javascript html ios angularjs ionic-framework

我正在尝试在移动设备中实现一项功能,其中点击将打开“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/

相关文章:

ios - 你能从 iOS 应用程序向 Roku 显示数字内容吗(类似于 airplay)

android - 具有离线访问和本地安全性和跨平台的类似 Google Drive/Dropbox 的解决方案

ios - 向 UItableview 添加行并在 Viewcontroller 之间传递数据

javascript - React 无法读取 null 的属性

javascript - 在 jQuery 中添加工具提示

javascript - 继承图像的宽度(css)

html - CSS3 : Center Text (content) in div:before

jquery - html 鼠标悬停在事件上,无法显示对话框

javascript - 如何使用 React Native 在一行中创建两个具有不同对齐方式的文本标签?

PHP单页表单验证表单未验证