Getting the WebView element from its id from a Page element!


#1
let page = this.$refs.pagewebviewmap.nativeView;
let webview = page.getViewById('webviewmap');

console.log("page");
console.dir(page); // I have an object

console.log("webView");

console.dir(webview); // Is undefined

#2

If there is a id, webviewmap defined then it should work. Would you mind pasting the full example code?


#3
<template>
    <Page
        actionBarHidden="true"
        ref="pagewebviewmap">
        <ActionBar
            title="Tactical GeoData System"
            backgroundImage="url('~/images/bg_actionbar.png')"
            color="#ffffff"/>

        <GridLayout 
        rows="50,*">
            <WebView 
              ref="webviewmap"
              row="0"
              rowSpan="2"
              src="~/web/index.html"
              @loadFinished="onLoadFinished"/>
            
            <StackLayout 
                row="0"
                backgroundColor="rgba(200,200,200,0.5)">
                <ScrollView>
                    <Label text="Menu" />
                </ScrollView>
            </StackLayout>

            <!--GridLayout 
                row="1"
                width="200"
                columns="*,*"
                rows="25,20,20,20"
                height="105"
                horizontalAlignment="right"
                verticalAlignment="bottom"
                backgroundColor="rgba(200,200,200,0.5)"
                padding="5"
                margin="5">
                
                <Label text="Coordonnées GPS" 
                    col="0"
                    row="0"
                    colSpan="2"  
                    color="#50764f"
                    horizontalAlignment="middles"
                    fontWeight="bold"
                    fontSize="20"/>

                <Label text="Latitude  :" col="0" row="1" color="#007acc" fontSize="15"/>
                <Label :text="location.latitude" col="1" row="1" color="#007acc" fontSize="15"/>

                <Label text="Longitude :" col="0" row="2" color="#007acc" fontSize="15"/>
                <Label :text="location.longitude" col="1" row="2" color="#007acc" fontSize="15"/>
                    
                <Label text="Altitude  :" col="0" row="3" color="#007acc" fontSize="15"/>
                <Label :text="location.altitude" col="1" row="3" color="#007acc" fontSize="15"/>

            </GridLayout-->

    </GridLayout>
      
      
  </Page>
</template>

<script>
 
const WebViewInterfaceModule = require ('nativescript-webview-interface');
const geolocation  = require('nativescript-geolocation');
var fileSystemModule = require("file-system");

const webViewModule = require('ui/web-view');

export default {
  data: function() {
    return {
      location: null,
      webviewInterface: null
    };
  },

  mounted() {
    this.$orientation.setOrientation("landscape");
    let page = this.$refs.pagewebviewmap.nativeView;
    //let webview = page.getViewById('webviewmap');
    //let webview = this.$refs.webviewmap.nativeView;

    //console.log("Element webView");
    //console.dir(webview); // Is undefined 


    //new WebViewInterfaceModule.WebViewInterface(webViewModule,'~/web/index.html');
    var fileName = "location.js";
    var file = fileSystemModule.knownFolders.documents().getFile('~/web' + fileName);
    
    this.$orientation.setOrientation("landscape");
    geolocation.getCurrentLocation( {timeout: 5000} ).then(
        (location) => {
          this.location = location;
          //this.webviewInterface.emit('loadLocation', location);
            console.dir(JSON.stringify(location));
        }, 
        (error) => {
          console.log("Error: " + error.message);
        }
    );
    
  },

  methods: {
    onLoadFinished(args) {
       
    }
  }
};
</script>

<style scoped>

</style>

#4

I wan to use nativescript-webview-interface with nativescript-vue, there is something wrong !


#5

You just missed one thing,

id !== ref

If you are willing to use getViewById then you must declare id property. ref is something specific to Vue.