cordova - Cordova InAppBrowser打开Web浏览器 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 这个插件用于Cordova 应用程序内打开Web浏览器。
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

第1步 - 安装插件

  • 我们能够使用这个插件之前,需要在命令提示符窗口中安装这个插件。
cordova教程 - cordova - 
学习cordova - 
cordova plugin - cordova inapp browser - cordova inapp浏览器 - Cordova plugin 生成 - Yeoman generator のインストール
- apache cordova代码- apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - cordova inapp浏览器 - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール - apache cordova代码- apache cordova的例子

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-inappbrowser

第2步 - 添加按钮

  • 我们将在 index.html 添加一个按钮将用于打开 inAppBrowser 窗口。

第3步 - 添加事件监听器

  • 现在让我们在index.j为我们的按钮添加事件侦听器到 onDeviceReady 函数中。
document.getElementById("openBrowser").addEventListener("click", openBrowser);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

第4步 - 创建函数

  • 在这一步中,我们创建一个功能,在应用程序内打开浏览器。我们将其分配给之后可以用它来添加事件侦听器的 ref 变量。
function openBrowser() {
   var url = 'https://cordova.apache.org';
   var target = '_blank';
   var options = "location=yes"
   var ref = cordova.InAppBrowser.open(url, target, options);

   ref.addEventListener('loadstart', loadstartCallback);
   ref.addEventListener('loadstop', loadstopCallback);
   ref.addEventListener('loadloaderror', loaderrorCallback);
   ref.addEventListener('exit', exitCallback);

   function loadstartCallback(event) {
      console.log('Loading started: '  + event.url)
   }

   function loadstopCallback(event) {
      console.log('Loading finished: ' + event.url)
   }

   function loaderrorCallback(error) {
      console.log('Loading error: ' + error.message)
   }

   function exitCallback() {
      console.log('Browser is closed...')
   }
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 如果我们按下 BROWSER 按钮,将看到屏幕上的以下输出。
 browser image

学习cordova - cordova教程 - 浏览器图像 - cordova示例 - cordova程序

  • 控制台也将监听事件。loadstart事件将触发当URL开始加载以及loadstop加载URL将闪光。我们可以控制台中看到它在。
  • 当关闭浏览器,退出事件将触发。
  • InAppBrowser窗口其它可能的选择。我们将在下面的表解释。
option details
location 用来打开浏览器地址栏中打开或关闭。它的值是 yes 或 no
hidden 用于隐藏或显示inAppBrowser。 它的值是 yes 或 no
clearCache 用于清除浏览器的cookie缓存。 它的值是 yes 或 no
clearsessioncache 用于清除会话cookie缓存。它的值是 yes 或 no
zoom 用于隐藏或显示Android浏览器的缩放控制。它的值是 yes 或 no
hardwareback yes使用于硬件后退按钮导航回到通过浏览器历史记录。 no用于关闭浏览器,当后退按钮被点击
cordova教程 - cordova - 
学习cordova - 
cordova plugin - cordova inapp browser - cordova inapp浏览器 - Cordova plugin 生成 - Yeoman generator のインストール
- apache cordova代码- apache cordova的例子

cordova教程 - cordova - 学习cordova - cordova plugin - cordova inapp浏览器 - apache cordova地理位置 - Cordova plugin 生成 - Yeoman generator のインストール - apache cordova代码- apache cordova的例子

 
ref.removeEventListener(eventname, callback); 
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 对于关闭 InAppBrowser 可以使用 −
ref.close();
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 如果我们打开了隐藏的窗口,我们可以显示它 -
ref.show(); 
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 即使是JavaScript代码可以被注入到InAppBrowser −
var details = "javascript/file/url"
ref.executeScript(details, callback);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 可用于注入 CSS -
var details = "css/file/url"
ref.inserCSS(details, callback);
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team

wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

Related Searches to Cordova InAppBrowser打开Web浏览器