Ionic 3中iframe内嵌网站聚焦输入框触发页面重定向问题求助

我来帮你搞定这个头疼的问题！这种在Android上嵌入iframe后，点击输入框弹出键盘就跳转到网站首页的情况，我之前也遇到过几次，大概率和iframe的重复加载、Ionic键盘事件干扰或者外部网站的视口逻辑有关，咱们一步步来排查解决：

1. 先解决最可能的原因：iframe重复加载 #

你当前的代码里，[src]="urlpaste()"会在页面每次变更检测时调用urlpaste()方法，而这个方法每次都会返回一个新的经过安全处理的URL对象——这就会触发iframe的重新加载！当键盘弹出时，Ionic的页面布局变化会触发变更检测，导致iframe重新加载到首页。

修改方案：
把URL的安全处理移到组件初始化时执行，只执行一次：

home.ts修改：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  url: any;
  constructor(private sanitize: DomSanitizer, public navCtrl: NavController) {}

  ngOnInit() {
    const rawUrl = "someurl"; // 这里替换成你的实际地址
    this.url = this.sanitize.bypassSecurityTrustResourceUrl(rawUrl);
  }
}

home.html修改：

<iframe style="height: 100vh; width: 100%;" [src]="url" name="iframe_a"></iframe>

这一步应该能解决大部分情况，先试试这个！

2. 调整Ionic键盘插件的配置 #

如果上面的方法没用，可能是Ionic的键盘插件在弹出时触发了页面滚动或布局重绘，间接导致了iframe的异常。可以调整键盘的相关配置：

在项目根目录的config.xml里添加以下配置：

<!-- 禁用键盘自动调整页面大小 -->
<preference name="KeyboardResize" value="false" />
<!-- 使用原生键盘调整模式，避免Ionic的自定义逻辑干扰 -->
<preference name="KeyboardResizeMode" value="native" />
<!-- 禁止键盘弹出时自动滚动到输入框 -->
<preference name="KeyboardScroll" value="false" />

确保你已经安装了适配Ionic 3的键盘插件：

cordova plugin add cordova-plugin-ionic-keyboard@2.2.0

3. 阻止iframe的意外跳转 #

如果外部网站本身在键盘弹出时会触发页面重定向（比如某些响应式网站会检测视口变化跳转到移动端首页），可以监听iframe的页面跳转事件，阻止不必要的跳转：

home.ts修改：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  url: any;
  @ViewChild('iframe') iframe: ElementRef;
  originalIframeUrl: string;

  constructor(private sanitize: DomSanitizer, public navCtrl: NavController) {}

  ngOnInit() {
    const rawUrl = "someurl";
    this.originalIframeUrl = rawUrl;
    this.url = this.sanitize.bypassSecurityTrustResourceUrl(rawUrl);
  }

  ionViewDidLoad() {
    const iframeEl = this.iframe.nativeElement;
    iframeEl.onload = () => {
      const iframeWindow = iframeEl.contentWindow;
      // 监听页面即将跳转的事件，阻止意外跳转
      iframeWindow.addEventListener('beforeunload', (e) => {
        // 这里可以判断当前是否是用户主动跳转，不是的话阻止
        if (iframeWindow.location.href !== this.originalIframeUrl) {
          e.preventDefault();
          // 有些浏览器需要返回值才能生效
          e.returnValue = '是否要离开当前页面？';
        }
      });

      // 或者直接监听地址变化，强制恢复到原地址
      setInterval(() => {
        if (iframeWindow.location.href !== this.originalIframeUrl) {
          iframeWindow.location.href = this.originalIframeUrl;
        }
      }, 100);
    };
  }
}

home.html修改：

<iframe #iframe style="height: 100vh; width: 100%;" [src]="url" name="iframe_a"></iframe>

4. 修正外部网站的视口设置（如果能控制外部网站的话） #

如果外部网站是你自己开发的，检查它的视口meta标签，确保键盘弹出时不会触发重定向：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

避免在视口变化时执行重定向逻辑。

先从第一步开始尝试，这是最常见的原因！如果还是不行，再依次试后面的方法。

内容的提问来源于stack exchange，提问作者Umair Cheema