ionic-framework 相关问题

我正在使用 iframe 在我的 ionic 视图之一中加载网页。 </ifra...</desc> <question vote="0"> 我正在使用 iframe 在我的 ionic 视图之一中加载网页。 <pre><code><iframe name="siteFrame" id="siteFrame" src="www.example.com" style="width:100%; height:100%" height="100%" ></iframe> </code></pre> 发生的情况是，当按下后退按钮而不是返回到 iframe 中的上一页时，应用程序存在。 我无法检测到 iframe 的当前 href，因为跨域安全问题阻止了我。 我想要做的是手机后退按钮应该在 iframe 上工作，但是当 iframe 位于其主页时，后退按钮应该在视图上工作 这怎么办？ </question> <answer tick="false" vote="1"> 问题是 Cordova 将后退按钮链接到 webviews back 命令，如果它不在 iframe 中返回，则 iframe 永远不会形成您的 webviews 历史记录的一部分（它应该是，但我可能是错的 - 有你完全改变了你的历史记录的运作方式吗？） 您可以尝试自己捕获后退动作，并使用它来指示 iframe 返回页面。 实现此目的的一种方法是 <pre><code>document.addEventListener("backbutton", yourFunctionHere, false);</code></pre>，然后您可以使用 <pre><code>yourFunctionHere</code></pre><pre> 指示 iframe 返回到 </pre><code>iframe.contentWindow.history.back();</code> 调用中 我尚未测试上述任何内容，但希望这能为您提供一个可以继续工作的起点。然而，考虑到您正在跨域工作，甚至 back() 命令的访问也可能受到限制，在这种情况下，您可能不走运。 您可以在这里找到相关的 Cordova 文档，以防万一：<a href="https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html" rel="nofollow">https://cordova.apache.org/docs/en/edge/cordova_events_events.md.html</a> </answer> <answer tick="false" vote="0"> 处理 ionic 后退按钮按下事件并从那里导航 iframe。检查下面的链接 <a href="https://sathesh.in/ionic/iframe-and-cordova-ionic-back-button/" rel="nofollow noreferrer">点击这里</a> </answer> <answer tick="false" vote="0"> 这对我来说是工作！ <pre><code>.close{ position: absolute; z-index: 100; background-color: transparent; width: 100%; height: 50px; margin-top: 1.5rem; img{ width: 32px; height: 32px; float: right; margin-right: 1.2rem; margin-top: 1rem; } </code></pre> } <pre><code> .iframe{ position: relative; z-index: 99; } </code></pre> </answer> <answer tick="false" vote="0"> <blockquote> HTML </blockquote> <pre><code><ion-content> <iframe id="myIframe" src="https://example.com" style="width:100%; height:100%;"></iframe> </ion-content> import { Component, ElementRef, ViewChild } from '@angular/core'; import { GestureController } from '@ionic/angular'; @Component({ selector: 'app-your-page', templateUrl: './your-page.page.html', styleUrls: ['./your-page.page.scss'], }) export class YourPagePage { @ViewChild('myIframe', { static: true }) myIframe: ElementRef<HTMLIFrameElement>; constructor(private gestureCtrl: GestureController) { } ngAfterViewInit() { const gesture = this.gestureCtrl.create({ el: this.myIframe.nativeElement, gestureName: 'swipe', onMove: (ev) => this.onSwipe(ev), }); gesture.enable(); } onSwipe(event: any) { // Check for swipe direction (right to left) if (event.deltaX > 50) { this.myIframe.nativeElement.contentWindow.history.back(); } } } </code></pre> <blockquote> 要使此方法发挥作用，iframe 内容必须来自同一个领域。如果是跨域iframe，就会遇到安全问题限制。确保 iframe 内容来自您自己的域或您控制的域。 </blockquote> </answer> </body></html>

javascript cordova iframe ionic-framework

回答 0 投票 0

尝试将 @angular/pwa 添加到我的 Ionic - 电容器应用程序中

我正在尝试添加 @angular/pwa 但失败并出现以下错误，这是新的。我该怎么做才能解决这个错误？ ng 添加@angular/pwa ℹ 使用包管理器：npm ✔ 找到兼容包...

angular ionic-framework progressive-web-apps capacitor

回答 1 投票 0

使用反应式表单的 ionic 5 和 Angular 9 出现错误“没有带有名称的表单控件的值访问器”

我正在使用 ionic 5 和 Angular 9。我正在尝试创建一个反应式表单，但收到错误“没有名称为“lastname”的表单控件的值访问器”。这是我的代码：出口类

angular ionic-framework angular9 angular-reactive-forms ionic5

回答 4 投票 0

Ionic 6 隐藏部分日期时间标题

我正在将 Ionic 6 与 Angular 结合使用。我有一个日期时间组件，并且设置了标题槽，例如：我正在将 Ionic 6 与 Angular 结合使用。我有一个日期时间组件，并且设置了 title 槽，例如： <ion-datetime [showDefaultTitle]="false" presentation="date"> Title </ion-datetime> 问题是，这将我的标题显示为副标题，而另一个包含当前所选日期的标题显示为标题。在他们自己的文档中的示例中，这甚至不存在。我的问题是如何删除这个附加标头？它是与类datetime-selected-date一起添加的。我尝试通过设置属性 display: none 来不显示此类，但即使使用 ::ng-deep 执行此操作，它也不起作用。我使用此结构在日期选择器上方显示标题，而不在标题中显示日期： <ion-item> <ion-label>...</ion-label> <ion-datetime>...</ion-datetime> </ion-item> 我正在使用 ionic + vue3。不确定这是否能完全解决您的问题，但我想隐藏日历标题，并且我能够这样做： onMounted(() => { const ionDatetime = document.querySelector('ion-datetime'); if (ionDatetime) { const observer = new MutationObserver(() => { const shadowRoot = ionDatetime.shadowRoot; if (shadowRoot) { const calendarHeader = shadowRoot.querySelector('.calendar-header'); const timeButton = shadowRoot.querySelector('::part(time-button)'); const monthYearButton = shadowRoot.querySelector('::part(month-year-button)'); const calendarActionButtons = shadowRoot.querySelector('::part(calendar-action-buttons)'); if (calendarHeader) { calendarHeader.style.display = 'none'; } if (timeButton) { timeButton.style.display = 'none'; } if (monthYearButton) { monthYearButton.style.display = 'none'; } if (calendarActionButtons) { calendarActionButtons.style.display = 'none'; } } }); observer.observe(ionDatetime, { childList: true, subtree: true }); } });

angular ionic-framework ionic6

回答 2 投票 0

ionic 7 电容 Android 应用视频编辑器 SDK 实现？

我正在使用 Angular 17 构建带有 Capacitor 的 Ionic 7 应用程序。我需要添加类似于 Instagram Reels 的视频编辑功能。具体来说，我需要以下选项：上传视频剪切视频添加...

javascript angular ionic-framework capacitor-plugin

回答 1 投票 0

IONIC 6 Capacitor Android 和 iOS 应用程序和 Azure AD 身份验证在外部浏览器中打开

我使用 Ionic 6 框架、Angular 和 Capacitor 开发适用于 Android 和 iOS 的应用程序。我想使用 Microsoft 的 Azure AD 进行身份验证，而不使用 Auth Connect 模块。我已经集成了

angular ionic-framework azure-active-directory azure-ad-msal capacitor

回答 2 投票 0

ionic 7 电容应用程序视频编辑器 SDK 实现？

javascript angular ionic-framework capacitor-plugin

回答 1 投票 0

如何在 ion-alert-button 中使用 Ion-router-link

实际上我已经创建了一个按钮，当我们单击该按钮时，它会显示警报，您确定吗？因此，当我单击“是”时，我想重定向到另一个页面或路由到另一个页面实际上我已经创建了一个按钮，当我们单击该按钮时，它会显示警报，您确定吗？因此，当我单击“是”时，我想重定向到另一个页面或路由到另一个页面 <IonCardContent className={classes.cardContent}> <IonButton id="present-alert" routerDirection="back" className={`${classes.approveBtn}`} onClick={() => showAlert()}> Approve </IonButton> <IonButton id="present-alert" routerDirection="back" onClick={() => showAlert()} > Reject </IonButton> <IonAlert isOpen={alert} trigger="present-alert" header="Are you sure?" className="custom-alert" onDidDismiss={() => showAlert()} buttons={[ { text: 'No', cssClass: 'alert-button-cancel', }, { text: 'Yes', cssClass: 'alert-button-confirm', handler:()=> { <Redirect to="/admin/orders/requests" /> } } ]} ></IonAlert> </IonCardContent> <IonAlert header="Alert!" trigger="present-alert" buttons={[ { text: 'Cancel', role: 'cancel', handler: () => { console.log('Alert canceled'); }, }, { text: 'OK', role: 'confirm', handler: () => { console.log('Alert confirmed');/// ==> DO ROUTING CALLS HERE }, }, ]} onDidDismiss={({ detail }) => console.log(`Dismissed with role: ${detail.role}`)} ></IonAlert> 您可以使用警报按钮来做到这一点

reactjs ionic-framework button routes alerts

回答 1 投票 0

@Capacitor/应用程序启动器打开网页而不是应用程序

我在我的 ionic cordova 项目中安装了 @capacitor/app-launcher，因为在将 Angular 版本升级到 16 后，@ionic-native/app-launcher 不再可用。我通过尝试打开来测试插件

angular cordova ionic-framework capacitor capacitor-plugin

回答 1 投票 0

PWA 可以访问 NFC 芯片吗

我刚刚开始一个新项目，客户想要使用 Vue.js 开发移动应用程序。我需要在 Ionic Vue 应用程序和使用 Vue.js 的 PWA 之间做出选择。我需要访问

vue.js ionic-framework progressive-web-apps nfc hybrid-mobile-app

回答 2 投票 0

如何为自定义（普通 Javascript）Ionic 应用程序设置“构建”脚本？

我是一名技术老师，我正在为高中生设计一门编码课程。我想教他们 Ionic，而不必教他们 React、Angular 或 Vue。他们已经了解基本的网络