cordovaace-plugin

Native header and footer with inAppBrowser


Still trying to wrap my head around Ace.

We have an inAppBrowser opening "over" the webview. Would we be able to add a native header and footer and have the inAppBrowser take up the space in the middle using Ace?

Any examples that can point me in the right direction?


Solution

  • I assume you are referring to the cordova-plugin-inappbrowser plugin? With Ace, there is a way to write JavaScript to manipulate any native UI objects and attach new ones (like headers and footers), although the exact approach depends on how cordova-plugin-inappbrowser presents its native UI. I'm intrigued by this question, so I'll do some research. And I bet there's something we can do to Ace to make interacting with native UI injected by other plugins easier.

    Alternatively, you could navigate to a new native page with a header, footer, and a separate WebView control. But then, you'd be responsible for adding your own back/forward/done buttons, so perhaps that's not the best way to go.

    UPDATE: I've posted a new sample that accomplishes this: https://github.com/Microsoft/ace/tree/master/examples/WithOtherPlugins/InAppBrowser

    The relevant case is the "dialog" one. Note that Page-level things like navigation headers and menu bars aren't supported yet on modal dialogs, but this surrounds the other plugin's native UI with native buttons in a grid. I'll be posting a writeup about this tomorrow and I'll update this answer when I do. Thanks!