How to use inappbrowser plugin?

Questions
1

I’m trying to use cordova plugin in my framework7 project built with webpack using following code:-

$$(document).on("page:init",'.page[data-name="home"]',function(e,page){
  var ref = window.cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
});

It shows following error:-

window.cordova is not defined

How can i access the cordova plugin in my app.js

2

What method are you using to debug your app? Cordova will only run if you are debugging with it. I’d suggest using Visual Studio Code with the Cordova tools extension to debug Cordova projects on the desktop.

3

can you explain the process of debugging the app

4

Let’s back way up… Firstly, how did you install Framework 7; Was it from the CLI? Or, do you know if you have otherwise installed Apache Cordova?

5

I’m using framework7 webpack project created using framework7 cli and yeah, cordova is installed in the project

6

Make sure your Javascript code falls inside of the ‘deviceready’ event. Cordova plugins will only become available once Cordova is properly initialised.

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
 // Your plugin-specific code here
}

Cordova isn’t used when debugging on a standard web server or using Chrome/Safari/etc to view pages from the file system. You need to be running Cordova in the debug session, so make sure you either run on a physical device or in an IDE simulator, or run a Cordova simulator like the one for VS Code.

7

It would be great if you can point me to some github repository projects which are using webpack framework7 project.What is the syntax for accessing cordova plugin in app.js. Most probably it looks like it’s occuring due to incorrect syntax @nolimits4web Can you provide your valuable insight or a example?

8

I am learning how to install cordova plugins on framework7.
So you are saying , all the plugin must be initialized in cordova folder where “function onDeviceReady() {” resides and not in app.js>?

im still learning how to use cordova plugins in f7.

9

You can use the plugins within your app.js file. It depends on how you’ve chosen to set up your app (whether you’re using a single Javascript file, or whether you’re using a bundler like Web Pack to integrate many Javascript files into a single production build.)

The plugin files themselves will reside in the ‘plugins’ folder. You make references to them in your app’s Javascript code.

As you alluded to, you must use the onDeviceReady event to properly interact with plugins. This is because onDeviceReady fires when Cordova has finished loading. If you called a plugin before Cordova has finished loading (eg provide access to the camera) then your app will cause an error.

3 Likes