ionic框架中的Android Webview等价物是啥？

Posted 2023-02-19

【中文标题】ionic框架中的Android Webview等价物是啥？

【英文标题】：What is the equivalent of Android Webview In the ionic framework?ionic框架中的Android Webview等价物是什么？

【发布时间】：2015-04-07 02:01:33

【问题描述】：

我创建了一个 IONIC/Angular JS 应用程序；我想在其上加载一个网页，就像使用 android WebView 一样；也就是说，在我的离子应用程序的一个分区中显示我的网页。所以问题是，有没有 IONIC 组件可以做到这一点？

【问题讨论】：

Ionic 是一个 html/javascript/CSS 框架，更具体地说是一个 UI 框架，其中 Angular JS 是用于与 UI 交互的模型/视图框架。 Cordova 是允许您运行 Web 应用程序的 WebView 框架。所以你需要的是 Cordova/phonegap 来运行你的 Ionic/Angular 应用程序。

谢谢弗兰克，我知道。真的，我想要的是在我的离子应用程序的一个部门中加载一个外部网页。请看这个例子：[link]tutorialspoint.com/android/android_webview_layout.htm);这是一个 android 示例。

我不明白你的意思。您是要加载外部网页还是要在 web 视图中加载 Ionic Web 应用程序？如果您想在Cordova based Ionic application 中加载外部网页，则可以使用in-app browser plugin 加载外部网页。

Inappbrowser Link

inAppBrowser 的作用是从我的 ionic App 中打开另一个浏览器选项卡中的给定链接。但我想避免这种情况：此链接将在另一个选项卡中打开；我希望它在我的 Ionic 应用程序中完全像这样打开：[link](tutorialspoint.com/android/android_webview_layout.htm)。但如果这对 Ionic 不可行，我将只使用 " inAppBrowser "。

【参考方案1】：

我知道你不久前发布了这个问题。我同样需要在我的 ionic 页面中嵌入一个网页，我找到的解决方案是添加一个 iframe 标签。将源设置为转到您要嵌入的链接。iframe 将包含应用程序内的网页。您甚至可以创建一个控制器来添加更多功能。请参阅下面的代码：

<ion-view>
  <ion-content class= 'padding has-subheader'>
    <iframe class= 'webPage' name= "eventsPage" src="http://www.algonquincollege.com/studentsupportservices/events/">
   </iframe>
  </ion-content></ion-view>

对于样式，您需要使用由 ionic 自动创建的类滚动来定位 div。例如，我想让网页填充 90% 的宽度。见下面的代码：

ion-content div.scroll
  height: 90%; 

.webPage
  width: 100%;
  height: 100%;
  border: 2px solid #EAAB00;
  padding: 1rem;

希望这会有所帮助。 完整的细节在这里：http://mobileapplicationsdesigndevelopment.blogspot.ca/

【讨论】：

我没有尝试过 Nehmat 的解决方案，但这对我有用，所以我想分享...blog.nraboy.com/2014/07/launch-external-urls-ionicframework

太棒了！但是，嵌入式网站中的某些 javascript 无法执行，它显示错误消息Blocked a frame with origin "http://xxxx" from accessing a frame with origin "file://". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match. 知道如何解决这个问题吗？ （我已经在config.xml中设置了白名单和访问）

@nehmat-gereige 你是救世主！！非常感谢

嗨@Kevin，你设置InAppBrowser插件了吗？我有同样的问题并删除InAppBrowser插件解决框架问题