Skip to content

F
Flutter Inappwebview
Commit 660292f5 authored by pichillilorenzo's avatar pichillilorenzo
Browse files
Options

updated documentation for addJavaScriptHandler method, updated README.md,... 

updated documentation for addJavaScriptHandler method, updated README.md, updated inline webview example
parent 0c49b45b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 451 additions and 299 deletions
.idea/workspace.xml
View file @ 660292f5
This diff is collapsed.
README.md
View file @ 660292f5
......@@ -552,10 +552,9 @@ Injects a CSS file into the `InAppWebView` window.
inAppWebViewController.injectStyleFile(String urlFile);
```
#### int InAppWebViewController.addJavaScriptHandler
#### void InAppWebViewController.addJavaScriptHandler
Adds/Appends a JavaScript message handler `callback` (`JavaScriptHandlerCallback`) that listen to post messages sent from JavaScript by the handler with name `handlerName`.
Returns the position `index` of the handler that can be used to remove it with the `removeJavaScriptHandler()` method.
Adds a JavaScript message handler `callback` (`JavaScriptHandlerCallback`) that listen to post messages sent from JavaScript by the handler with name `handlerName`.
The Android implementation uses [addJavascriptInterface](https://developer.android.com/reference/android/webkit/WebView#addJavascriptInterface(java.lang.Object,%20java.lang.String)).
The iOS implementation uses [addScriptMessageHandler](https://developer.apple.com/documentation/webkit/wkusercontentcontroller/1537172-addscriptmessagehandler?language=objc)
......@@ -563,14 +562,42 @@ The iOS implementation uses [addScriptMessageHandler](https://developer.apple.co
The JavaScript function that can be used to call the handler is `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args);`, where `args` are [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
The `args` will be stringified automatically using `JSON.stringify(args)` method and then they will be decoded on the Dart side.
In order to call `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args)` properly, you need to wait and listen the JavaScript event `flutterInAppBrowserPlatformReady`.
This event will be dispatch as soon as the platform (Android or iOS) is ready to handle the `callHandler` method.
```javascript
window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
console.log("ready");
});
```
`window.flutter_inappbrowser.callHandler` returns a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
that can be used to get the json result returned by `JavaScriptHandlerCallback`.
In this case, simply return data that you want to send and it will be automatically json encoded using `jsonEncode` from the `dart:convert` library.
So, on the JavaScript side, to get data coming from the Dart side, you will use:
```javascript
window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
window.flutter_inappbrowser.callHandler('handlerFoo').then(function(result) {
console.log(result, typeof result);
console.log(JSON.stringify(result));
});
window.flutter_inappbrowser.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
console.log(result, typeof result);
console.log(JSON.stringify(result));
});
});
```
```dart
inAppWebViewController.addJavaScriptHandler(String handlerName, JavaScriptHandlerCallback callback);
```
#### bool InAppWebViewController.removeJavaScriptHandler
#### JavaScriptHandlerCallback InAppWebViewController.removeJavaScriptHandler
Removes a JavaScript message handler previously added with the `addJavaScriptHandler()` method in the `handlerName` list by its position `index`.
Returns `true` if the callback is removed, otherwise `false`.
Removes a JavaScript message handler previously added with the `addJavaScriptHandler()` associated to `handlerName` key.
Returns the value associated with `handlerName` before it was removed.
Returns `null` if `handlerName` was not found.
```dart
inAppWebViewController.removeJavaScriptHandler(String handlerName, int index);
```
......
android/src/main/java/com/pichillilorenzo/flutter_inappbrowser/FlutterWebView.java
View file @ 660292f5
......@@ -4,7 +4,6 @@ import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
......@@ -83,7 +82,6 @@ public class FlutterWebView implements PlatformView, MethodCallHandler {
@Override
public void onMethodCall(MethodCall call, Result result) {
String source;
String jsWrapper;
String urlFile;
switch (call.method) {
case "getUrl":
......@@ -130,7 +128,6 @@ public class FlutterWebView implements PlatformView, MethodCallHandler {
if (webView != null) {
source = call.argument("source").toString();
webView.injectScriptCode(source, result);
// ((InputMethodManager) this.activity.getSystemService(Context.INPUT_METHOD_SERVICE)).toggleSoftInput(0, InputMethodManager.HIDE_IMPLICIT_ONLY);
}
else {
result.success("");
......
example/assets/css/style.css
View file @ 660292f5
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
background-color: #333;
color: #fff;
display: -ms-flexbox;
display: flex;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
.cover-container {
max-width: 42em;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}
/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}
img {
max-width: 100%;
/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
\ No newline at end of file
example/assets/images/dart.svg deleted 100644 → 0
View file @ 0c49b45b
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 439 137.29" enable-background="new 0 0 439 137.29" xml:space="preserve">
<g>
<g opacity="0.54">
<path d="M207.08,20.2h27.55c9.35,0,17.51,1.93,24.49,5.8c6.97,3.87,12.33,9.25,16.07,16.13c3.74,6.89,5.61,14.79,5.61,23.72
s-1.87,16.83-5.61,23.72s-9.1,12.26-16.07,16.13c-6.97,3.87-15.13,5.8-24.49,5.8h-27.55V20.2z M234.63,101.19
c10.8,0,19.36-3.1,25.7-9.31c6.33-6.21,9.5-14.88,9.5-26.02s-3.17-19.81-9.5-26.02c-6.33-6.21-14.9-9.31-25.7-9.31H217.8v70.65
h16.83V101.19z"/>
<path d="M297.49,110.75c-3.74-1.87-6.63-4.44-8.67-7.72c-2.04-3.27-3.06-6.99-3.06-11.16c0-6.89,2.59-12.26,7.78-16.13
c5.18-3.87,11.73-5.8,19.64-5.8c3.91,0,7.54,0.43,10.9,1.28s5.93,1.83,7.72,2.93V70.2c0-4.85-1.7-8.74-5.1-11.67
c-3.4-2.93-7.7-4.4-12.88-4.4c-3.66,0-7.01,0.79-10.08,2.36c-3.06,1.57-5.48,3.76-7.27,6.57l-8.16-6.12
c2.55-3.91,6.06-6.97,10.52-9.18c4.46-2.21,9.42-3.32,14.86-3.32c8.84,0,15.79,2.32,20.85,6.95c5.06,4.64,7.59,10.95,7.59,18.94
v41.19H331.8v-9.31h-0.51c-1.87,3.15-4.68,5.82-8.42,8.03c-3.74,2.21-7.95,3.32-12.63,3.32
C305.49,113.56,301.24,112.62,297.49,110.75z M321.47,101.19c3.14-1.87,5.65-4.38,7.52-7.52s2.81-6.59,2.81-10.33
c-2.04-1.36-4.55-2.47-7.52-3.32c-2.98-0.85-6.12-1.28-9.44-1.28c-5.95,0-10.44,1.23-13.45,3.7c-3.02,2.47-4.53,5.66-4.53,9.56
c0,3.57,1.36,6.46,4.08,8.67c2.72,2.21,6.16,3.32,10.33,3.32C314.92,103.99,318.33,103.06,321.47,101.19z"/>
<path d="M353.57,47.5h10.33v10.33h0.51c1.53-3.83,4.12-6.8,7.78-8.93c3.65-2.12,7.65-3.19,11.99-3.19c1.87,0,3.44,0.13,4.72,0.38
v11.1c-1.45-0.34-3.4-0.51-5.87-0.51c-5.53,0-10.01,1.83-13.45,5.48c-3.44,3.66-5.17,8.42-5.17,14.28v36.09h-10.84V47.5
L353.57,47.5z M420.89,112.26c-2.25-0.86-4.14-2.03-5.68-3.51c-1.7-1.64-2.98-3.55-3.83-5.71c-0.85-2.16-1.28-4.8-1.28-7.92V56.3
h-11.35v-9.82h11.35V28.12h10.84v18.36h15.81v9.82h-15.81v36.24c0,3.65,0.68,6.34,2.04,8.08c1.61,1.91,3.95,2.87,7.01,2.87
c2.46,0,4.85-0.72,7.14-2.17v10.59c-1.28,0.59-2.57,1.02-3.89,1.28s-3,0.38-5.04,0.38C425.59,113.56,423.15,113.12,420.89,112.26z
"/>
</g>
<g>
<path fill="#01579B" d="M29.64,108.94L6.36,85.66c-2.76-2.84-4.48-6.84-4.48-10.75c0-1.81,1.02-4.64,1.79-6.27l21.49-44.77
L29.64,108.94z"/>
<path fill="#40C4FF" d="M109.34,28.35L86.06,5.07c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87
L109.34,28.35z"/>
<polygon fill="#40C4FF" points="57.4,136.7 113.82,136.7 113.82,112.52 71.73,99.09 33.23,112.52 "/>
<path fill="#29B6F6" d="M25.17,96.41c0,7.18,0.9,8.95,4.48,12.54l3.58,3.58h80.59l-39.4-44.77L25.17,23.88V96.41z"/>
<path fill="#01579B" d="M96.8,23.87H25.16l88.65,88.65h24.18V57l-28.65-28.65C105.32,24.31,101.74,23.87,96.8,23.87z"/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M30.54,109.84c-3.58-3.6-4.48-7.14-4.48-13.43V24.77l-0.9-0.9
V96.4C25.17,102.7,25.17,104.44,30.54,109.84l2.69,2.69l0,0L30.54,109.84z"/>
<polygon opacity="0.2" fill="#263238" enable-background="new " points="137.1,56.11 137.1,111.63 112.92,111.63
113.82,112.52 138,112.52 138,57.01 "/>
<path opacity="0.2" fill="#FFFFFF" enable-background="new " d="M109.34,28.35c-4.44-4.44-8.08-4.48-13.43-4.48H25.17l0.9,0.9
h69.85C98.58,24.77,105.33,24.32,109.34,28.35L109.34,28.35z"/>
<radialGradient id="SVGID_1_" cx="69.955" cy="60.8864" r="68.065" gradientTransform="matrix(1 0 0 -1 0 129.5328)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</radialGradient>
<path opacity="0.2" fill="url(#SVGID_1_)" enable-background="new " d="M137.1,56.11l-27.76-27.76L86.06,5.07
c-2.03-2.04-6.27-4.48-9.85-4.48c-3.08,0-6.1,0.62-8.06,1.79L25.17,23.87L3.68,68.64c-0.77,1.63-1.79,4.46-1.79,6.27
c0,3.91,1.72,7.91,4.48,10.75l21.46,21.3c0.51,0.63,1.11,1.27,1.83,1.98l0.9,0.9l2.69,2.69l23.28,23.28l0.9,0.9h55.52h0.9v-24.18
h24.18v-0.06V57.01L137.1,56.11z"/>
</g>
</g>
</svg>
example/assets/images/flutter-logo.svg 0 → 100644
View file @ 660292f5
This diff is collapsed.
example/assets/index.html
View file @ 660292f5
......@@ -2,41 +2,56 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Flutter InAppBrowser</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<img src="images/dart.svg" alt="dart logo">
<div class="row">
<div class="col-sm">
<a href="page-1.html">PAGE 1</a>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Flutter InAppBrowser</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link active" href="index.html">Home</a>
<a class="nav-link" href="page-1.html">Page 1</a>
<a class="nav-link" href="page-2.html">Page 2</a>
</nav>
</div>
<div class="col-sm">
<a href="page-2.html">PAGE 2</a>
</div>
<div class="col-sm">
<a href="page-3.html">PAGE 3</a>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading">Inline WebView</h1>
<img src="images/flutter-logo.svg" alt="flutter logo">
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</footer>
</div>
<script>
window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
console.log("ready");
window.flutter_inappbrowser.callHandler('handlerTest', 1).then(function(result) {
window.flutter_inappbrowser.callHandler('handlerFoo').then(function(result) {
console.log(result, typeof result);
console.log(JSON.stringify(result), result.bar);
});
window.flutter_inappbrowser.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
console.log(result, typeof result);
console.log(JSON.stringify(result));
});
});
</script>
</div>
</body>
</html>
\ No newline at end of file
example/assets/page-1.html
View file @ 660292f5
......@@ -2,30 +2,39 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Flutter InAppBrowser</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<img src="images/dart.svg" alt="dart logo">
<div class="row">
<div class="col-sm">
<a href="index.html">GO BACK HOME</a>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Flutter InAppBrowser</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link active" href="page-1.html">Page 1</a>
<a class="nav-link" href="page-2.html">Page 2</a>
</nav>
</div>
<div class="col-sm">
<h1>PAGE 1</h1>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading">Page 1</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</footer>
</div>
<script>
console.log("page 1");
</script>
</div>
</body>
</html>
\ No newline at end of file
example/assets/page-2.html
View file @ 660292f5
......@@ -2,30 +2,39 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Flutter InAppBrowser</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<img src="images/dart.svg" alt="dart logo">
<div class="row">
<div class="col-sm">
<a href="index.html">GO BACK HOME</a>
<body class="text-center">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">Flutter InAppBrowser</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="page-1.html">Page 1</a>
<a class="nav-link active" href="page-2.html">Page 2</a>
</nav>
</div>
<div class="col-sm">
<h1>PAGE 2</h1>
</header>
<main role="main" class="inner cover">
<h1 class="cover-heading">Page 2</h1>
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
</p>
</main>
<footer class="mastfoot mt-auto">
<div class="inner">
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
</div>
</div>
</footer>
</div>
<script>
console.log("page 2");
</script>
</div>
</body>
</html>
\ No newline at end of file
example/assets/page-3.html deleted 100644 → 0
View file @ 0c49b45b
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="container">
<img src="images/dart.svg" alt="dart logo">
<div class="row">
<div class="col-sm">
<a href="index.html">GO BACK HOME</a>
</div>
<div class="col-sm">
<h1>PAGE 3</h1>
</div>
</div>
</div>
<script>
console.log("page 3");
</script>
</div>
</body>
</html>
\ No newline at end of file
example/lib/inline_example.screen.dart
View file @ 660292f5
......@@ -6,16 +6,16 @@ class InlineExampleScreen extends StatefulWidget {
_InlineExampleScreenState createState() => new _InlineExampleScreenState();
}
class User {
String username;
String password;
class Foo {
String bar;
String baz;
User({this.username, this.password});
Foo({this.bar, this.baz});
Map<String, dynamic> toJson() {
return {
'username': this.username,
'password': this.password
'bar': this.bar,
'baz': this.baz
};
}
}
......@@ -54,7 +54,7 @@ class _InlineExampleScreenState extends State<InlineExampleScreen> {
decoration:
BoxDecoration(border: Border.all(color: Colors.blueAccent)),
child: InAppWebView(
//initialUrl: "https://mottie.github.io/Keyboard/",
//initialUrl: "https://flutter.dev/",
initialFile: "assets/index.html",
initialHeaders: {},
initialOptions: {
......@@ -63,8 +63,14 @@ class _InlineExampleScreenState extends State<InlineExampleScreen> {
},
onWebViewCreated: (InAppWebViewController controller) {
webView = controller;
controller.addJavaScriptHandler('handlerTest', (args) {
return new User(username: 'user', password: 'secret');
webView.addJavaScriptHandler('handlerFoo', (args) {
return new Foo(bar: 'bar_value', baz: 'baz_value');
});
webView.addJavaScriptHandler('handlerFooWithArgs', (args) {
print(args);
return [args[0] + 5, !args[1], args[2][0], args[3]['foo']];
});
},
onLoadStart: (InAppWebViewController controller, String url) {
......@@ -87,10 +93,21 @@ class _InlineExampleScreenState extends State<InlineExampleScreen> {
controller.loadUrl(url);
},
onLoadResource: (InAppWebViewController controller, WebResourceResponse response, WebResourceRequest request) {
print("resource " + request.url);
print("Started at: " +
response.startTime.toString() +
"ms ---> duration: " +
response.duration.toString() +
"ms " +
response.url);
},
onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
print(consoleMessage.message);
print("""
console output:
sourceURL: ${consoleMessage.sourceURL}
lineNumber: ${consoleMessage.lineNumber}
message: ${consoleMessage.message}
messageLevel: ${consoleMessage.messageLevel}
""");
},
),
),
......
example/lib/webview_example.screen.dart
View file @ 660292f5
......@@ -47,8 +47,7 @@ class MyInappBrowser extends InAppBrowser {
}
@override
void onLoadResource(
WebResourceResponse response, WebResourceRequest request) {
void onLoadResource(WebResourceResponse response, WebResourceRequest request) {
print("Started at: " +
response.startTime.toString() +
"ms ---> duration: " +
......@@ -59,7 +58,13 @@ class MyInappBrowser extends InAppBrowser {
@override
void onConsoleMessage(ConsoleMessage consoleMessage) {
print(consoleMessage.message);
print("""
console output:
sourceURL: ${consoleMessage.sourceURL}
lineNumber: ${consoleMessage.lineNumber}
message: ${consoleMessage.message}
messageLevel: ${consoleMessage.messageLevel}
""");
}
}
......
example/pubspec.yaml
View file @ 660292f5
......@@ -42,7 +42,6 @@ flutter:
- assets/index.html
- assets/page-1.html
- assets/page-2.html
- assets/page-3.html
- assets/css/
- assets/images/
......
lib/flutter_inappbrowser.dart
View file @ 660292f5
......@@ -858,6 +858,7 @@ class InAppWebViewController {
break;
case "onCallJsHandler":
String handlerName = call.arguments["handlerName"];
// decode args to json
List<dynamic> args = jsonDecode(call.arguments["args"]);
if (javaScriptHandlersMap.containsKey(handlerName)) {
// convert result to json
......@@ -1160,11 +1161,35 @@ class InAppWebViewController {
///The Android implementation uses [addJavascriptInterface](https://developer.android.com/reference/android/webkit/WebView#addJavascriptInterface(java.lang.Object,%20java.lang.String)).
///The iOS implementation uses [addScriptMessageHandler](https://developer.apple.com/documentation/webkit/wkusercontentcontroller/1537172-addscriptmessagehandler?language=objc)
///
///The JavaScript function that can be used to call the handler is `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args);`, where `args` are [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
///The JavaScript function that can be used to call the handler is `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args)`, where `args` are [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters).
///The `args` will be stringified automatically using `JSON.stringify(args)` method and then they will be decoded on the Dart side.
///
///Also, a [JavaScriptHandlerCallback] can return json data to the JavaScript side.
///In order to call `window.flutter_inappbrowser.callHandler(handlerName <String>, ...args)` properly, you need to wait and listen the JavaScript event `flutterInAppBrowserPlatformReady`.
///This event will be dispatch as soon as the platform (Android or iOS) is ready to handle the `callHandler` method.
///```javascript
/// window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
/// console.log("ready");
/// });
///```
///
///`window.flutter_inappbrowser.callHandler` returns a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
///that can be used to get the json result returned by [JavaScriptHandlerCallback].
///In this case, simply return data that you want to send and it will be automatically json encoded using [jsonEncode] from the `dart:convert` library.
///
///So, on the JavaScript side, to get data coming from the Dart side, you will use:
///```javascript
/// window.addEventListener("flutterInAppBrowserPlatformReady", function(event) {
/// window.flutter_inappbrowser.callHandler('handlerFoo').then(function(result) {
/// console.log(result, typeof result);
/// console.log(JSON.stringify(result));
/// });
///
/// window.flutter_inappbrowser.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}).then(function(result) {
/// console.log(result, typeof result);
/// console.log(JSON.stringify(result));
/// });
/// });
///```
void addJavaScriptHandler(String handlerName, JavaScriptHandlerCallback callback) {
this.javaScriptHandlersMap[handlerName] = (callback);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment