时间戳

首页 > 解决方案 > Ionic InAppBrowser 焦点在 iOS 上落后

javascript - Ionic InAppBrowser 焦点在 iOS 上落后

问题描述

问题
我有一个使用 Ionic4 的InAppBrowser打开的页面。浏览器打开正常，但焦点停留在前一个屏幕上。

这对残障用户来说是个问题，因为他们无法使用 Voiceover 等辅助工具导航打开的浏览器。当他们滑动时，它只是在打开的浏览器后面的元素上滑动。这个问题似乎与 iOS 无关（Android Talkback 正确地集中在应用内浏览器中）。

我尝试过
的到目前为止，我已经尝试订阅“loadstop”事件并执行 Javascript 以专注于浏览器中的 ID：

包.json

"ionic": "4.7.1",
"@ionic-native/in-app-browser": "^5.0.0"

Navigation Click Directive
我对这个指令的一些灵感来自这里的顶级 SO 答案。

import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser/ngx';

...

defaultOptions_ios: InAppBrowserOptions = {
    footer: 'yes',
    location: 'no',
    enableViewportScale: 'yes',
    closebuttoncaption: 'Close',
    transitionstyle: 'fliphorizontal',
    usewkwebview: 'yes',
    hideurlbar: 'yes',
    hidenavigationbuttons: 'yes',
    footercolor: '#000000',
    toolbarcolor: '#000000',
    closebuttoncolor: '#ffffff',
    lefttoright: 'no'
};

constructor(
    private inAppBrowser: InAppBrowser) {
}

openBrowser(url) {
    let inAppBrowserRef = this.inAppBrowser.create(url, '_blank', defaultOptions_ios);
    
    inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
        inAppBrowserRef.executeScript({code: `
          const elementId = document.querySelector('id');
          if(elementId) {
            elementId.focus();
          }
        `});
      });
}

但是，焦点仍然保留在前一个屏幕上。我正在寻找另一种可能的解决方案，将重点放在 iOS 上的应用内浏览器上。

标签： javascriptcordovaionic-frameworkionic4

解决方案

为了让 Ionic inapp 浏览器获得焦点，我最终不得不做的是将 tabindex 应用于我关注的元素。

inAppBrowserRef.on('loadstop').pipe(take(1)).subscribe(() => {
    inAppBrowserRef.executeScript({code: `
      const elementId = document.querySelector('id');
      if(elementId) {
        elementId.setAttribute('tabindex', '-1');
        elementId.focus();
      }
    `});
  });

它没有，我发现它需要一个才能专注于它。在我这样做之后，它按预期工作。

推荐阅读