Question

我的应用需要外部网址的登录页面。

我认为的登录逻辑是：

步骤

启动离子时打开外部网址
用户登录后，使用深层链接（例如：myapp：// main）

我测试了第2步，这是深层链接。效果很好。

所以，我现在必须做第1步。

首先，我使用iframe进行了测试。并且出现Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'.错误。似乎这需要服务器端配置。但无论如何我们不想用这种方式。 iframe感觉就像是黑客。

其次，我尝试了location.href = this.loginUrl;。在Chrome浏览器中工作得很好但是当我在iOS模拟器中构建时，我看到了地址栏，工具栏和关闭按钮。 我不喜欢这个，因为我不希望用户关闭登录页面或更改网址。

第三，尝试window.open(this.loginUrl, '_self', 'location=no')。与第二个结果相同。

第四，尝试使用in-app-browser plugin的离子版本。但结果与第二和第三相同。它仍会打开一个带有地址栏的浏览器，工具栏甚至会显示“返回myApp”。所以用户会觉得这是应用程序。 Check here，人们仍在寻找解决方案。

花了一天之后，我甚至都不知道我是否可以尝试选择。

Answer 1

我可以通过这样做来解决。但在真实设备中。 Xcode iPhone模拟器没有开放的应用内浏览器，但内置浏览器。

browser:any;

this.platform.ready().then(() => {
        this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no'); 
    });

Answer 2

您可以通过安装名为cordova-plugin-inappbrowser的cordova插件来解决此问题。执行以下命令：

ionic plugin add cordova-plugin-inappbrowser
npm install --save @ionic-native/in-app-browser

在你的app.module.ts上添加

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

并在app.module.ts

中将以下内容添加到您的提供商

    providers: [
    StatusBar,
    SplashScreen,
    InAppBrowser,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]

然后在你家。添加

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

并将其注入构造函数中，如下所示

    constructor(public navCtrl: NavController, private iab: InAppBrowser) {

  }

然后添加以下方法

 ionViewDidLoad(){
    this.iab.create('url', '_self', { location: 'no' }); }

检查此插件here

的不同选项

要删除地址栏，只需使用选项：

location: Set to yes or no to turn the InAppBrowser's location bar on or off.

ionic3打开外部URL，没有地址栏和工具栏和关闭按钮

2 个答案: