How to usage webview with ionic-vue

Ionic Framework
1

How to usage webview with ionic-vue
I have imports

import { Capacitor } from '@capacitor/core';

and in methods

webview(){
      this.Capacitor.convertFileSrc("https://google.com");
    }

This don’t work
Any one use webview with ionic-vue

1 Like
2

I am not sure what you are trying to do but I’ve gotten @capacitor/browser to work just fine with Capacitor 3 and Ionic Vue.

1 Like
3

Thank You
Can I get params value for webs after web closeing ?

4

Are you saying you want to get input from the user from the web page that you load within your Ionic app?

Can you explain what you are trying to do?

1 Like
5

Like This Ihave opend http://zaincash.com
on complete the form in zaincash
the url become http://zaincash.com?token=xxxxxxx
iwant get token to my app and close web page

6

With Capacitor’s Browser plugin you cannot do that. You can do it with Cordova’s In App Browser. I am also using this with Capacitor 3 and Ionic Vue.

With the In App Browser, you can use the loadstop event which returns the url that was loaded. I tested this and it fires every time a new webpage is loaded within the same browser instance.

I personally wouldn’t recommend passing info like this though from a web page to the Ionic app. I have only been working with Ionic for a few months so can’t speak on why but it just doesn’t feel proper or secure. A better way would be to call an API endpoint within your Ionic App to zaincash.com to get the token.

References:

1 Like
7

Can you help me with how to use with ioinc-vue javascript not type script

8

How to switch from Typescript to vanilla Javascript is documented here.

I went back and fourth a couple times and finally decided to stick with Typescript. It is a bit of a learning curve but I believe the benefit out ways the initial learning :slight_smile:

1 Like
9

I Know how to switch
Iwant help with In App Browser in vanilla javascritp ionic-vue

10

Something like this should work. This is using the Vue Composition API.

<script>
import { InAppBrowser } from '@ionic-native/in-app-browser'

export default {
    name: 'WebViewer',
    setup() {
        let browser

        const showWebpage = () => {
            const options = {
                location: 'yes',
                closebuttoncaption: 'Close',
                hidenavigationbuttons: 'yes',
                hideurlbar: 'yes',
            }

            browser = InAppBrowser.create('https://zaincash.com', '_blank', options)

            browser.on('loadstop').subscribe((event) => {
                // Do stuff with event.url
            })
        }

        return {
            // Methods
            showWebpage,
        }
    },
}
</script>
1 Like
11

Ah Ok Thank you I will test it

12

I Got this Error
Uncaught (in promise) TypeError: Cannot read property 'subscribe' of undefined

13

Can you share your full code?

14

import { WebView } from ‘@ionic-native/ionic-webview/ngx’;

constructor(private webview: WebView) { }

…

img = this.webview.convertFileSrc(‘file:///Users/dan/camera-image-12345.png’)

Thanks
Aakil Working at The Next Hint

1 Like
15

Hi @tafrej, this is the sample InAppBrowser for you.

For Capacitor, You re able to try with Browser (this is the one like InAppBrowser of Cordova, maybe capacitor just convert it cause both they have the same result. But Capacitor may not too many options like InAppBrowser from Cordova)

For Cordova you are just using the sample from the document.

This is the reference link, I think you should take a look:

16

Ionic apps are built using [web technologies] and are rendered using Web Views, which are a full screen and full-powered web browser.

Modern Web Views offer many built-in HTML5 APIs for hardware functionality such as cameras, sensors, GPS, speakers, and Bluetooth, but sometimes it may also be necessary to access platform-specific hardware APIs. In Ionic apps, hardware APIs can be accessed.
Thanks.
Aakil Working at Active Noon