Ionic应用程序的Webview

Webview on Ionic application

本文关键字：Webview 应用程序 Ionic      更新时间：2024-04-03

我使用Ionic框架创建了一个移动应用程序。我想创建一个关于ionic的网络视图。为此，我使用了cordova插件inappbrowser插件。现在，这个插件可以工作，但插件不稳定。我想用chrome浏览器而不是默认浏览器创建网络视图。为此，我使用了浏览器人行横道，并在应用浏览器插件中删除了cordova插件。但现在，webview不起作用。现在，当我在应用程序浏览器插件中同时使用浏览器crosswalk和cordova插件时，webview看起来很糟糕。关于如何使用chrome浏览器创建网络视图，有什么想法吗？

如果我理解正确，你问的不是如何在Ionic应用程序中创建网络视图，而是如何在手机的默认网络浏览器中打开外部url？

您可以使用cordova-plugin-whitelist插件来完成此操作。安装后，您可以设置一些内容，但我将在下面列出我使用的默认设置。这会导致所有外部项目在应用程序外部打开（所有这些都来自config.xml文件）：

<access origin="*"/>
<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>
<allow-intent href="tel:*" launch-external="yes"/>
<allow-intent href="sms:*" launch-external="yes"/>
<allow-intent href="mailto:*" launch-external="yes"/>
<allow-intent href="geo:*" launch-external="yes"/>

acces origin="*"告诉应用允许访问所有外部资源，因为*是通配符。之后，使用allow-intent并将launch-external属性设置为yes，这会告诉应用程序应该从外部打开使用href属性指定的所有链接。

上面的代码确保所有外部网站、电话号码、短信、电子邮件甚至地理位置都在本地应用程序中打开。你需要确保你在应用程序中使用的所有链接都使用上面提供的格式。

您无法将Chrome嵌入到您的应用程序中。你不喜欢的美学是InAppBrowser的Toolbar——你必须通过修改本地代码来自定义它。不幸的是，现在InAppBrowser没有提供API来定制其工具栏样式（我认为你不能利用"injectCSS"，但我可能错了）

相关文章：