pichillilorenzo / flutter_inappwebview

A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
https://inappwebview.dev
Apache License 2.0
3.29k stars 1.62k forks source link

Web Support: addJavaScriptHandler / callHandler not supported ? (even in same Origin) #1682

Open fvisticot opened 1 year ago

fvisticot commented 1 year ago

Environment

Technology Version
Flutter version 3.10.2
Plugin version
Android version
iOS version
macOS version
Xcode version
Web browser chrome

Device information:

Description

I try basic example with Same Frame Origin I'm not able to make the "addJavascriptHandler" (from Flutter) and callHandler(from JS). In the web_support.js, I do not see any trace of callHandler method and "flutterInAppWebViewPlatformReady" event to check if platform is ready

Is it planned to work in next release or it is not possible to make it works ?

Expected behavior:

Current behavior:

Steps to reproduce

  1. This
  2. Than that
  3. Then

Images

Stacktrace/Logcat

github-actions[bot] commented 1 year ago

👋 @fvisticot

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

LucaIaconelli commented 1 year ago

Is there any news regarding this issue?

ajayld commented 9 months ago

I'm using v6.0.0-beta.17 for the flutter_inappwebview plugin. The addJavaScriptHandler API documentation also does not mention the Web as a supported platform. I am getting an exception saying - Error: UnimplementedError: addJavaScriptHandler is not implemented on the current platform.

Is there an ETA for supporting this API on the Web platform?

guidotheelen commented 6 months ago

It would be great to have this 💯

sdivakarrajesh commented 6 months ago

Figured out a way to do this on same origin

In the dart side you can use this instead of the addJavaScriptHandler

import 'dart:html' as html;

html.window.addEventListener('message', (event) {
  final messageEvent = event as html.MessageEvent;
  print("Got a message ${messageEvent.data}");
});

In the js side

function sendMessageToContainer(message) {
  if (inIframe) {
    window.top.postMessage(message);
  } else {
    if (window.flutter_inappwebview) {
      window.flutter_inappwebview.callHandler(message);
    } else {
      console.log('not in an iframe and no flutter binding found');
    }
  }
}
MichaelSSY commented 3 months ago

找到了一种在同源上做到这一点的方法

在 dart 端你可以使用它来代替 addJavaScriptHandler

import 'dart:html' as html;

html.window.addEventListener('message', (event) {
  final messageEvent = event as html.MessageEvent;
  print("Got a message ${messageEvent.data}");
});

在js端

function sendMessageToContainer(message) {
  if (inIframe) {
    window.top.postMessage(message);
  } else {
    if (window.flutter_inappwebview) {
      window.flutter_inappwebview.callHandler(message);
    } else {
      console.log('not in an iframe and no flutter binding found');
    }
  }
}

A great method, but there is a problem that every time you click on a JS event, it will be called back 8 times, which is terrifying. May I ask if there is a solution?

image

image
shibakar commented 3 weeks ago

I am using youtube_player_flutter: ^9.1.1

DartError: UnimplementedError: addJavaScriptHandler is not implemented on the current platform
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3                                      throw_
packages/flutter_inappwebview_platform_interface/src/in_app_webview/platform_inappwebview_controller.dart 708:5  addJavaScriptHandler
packages/flutter_inappwebview/src/in_app_webview/in_app_webview_controller.dart 171:16                           addJavaScriptHandler
packages/youtube_player_flutter/src/player/raw_youtube_player.dart 99:15                                         <fn>
packages/youtube_player_flutter/src/player/raw_youtube_player.dart 210:39                                        <fn>
packages/flutter_inappwebview/src/in_app_webview/in_app_webview.dart 317:54                                      <fn>
packages/flutter_inappwebview_web/src/in_app_webview/in_app_webview.dart 323:26                                  [_onPlatformViewCreated]
packages/flutter_inappwebview_web/src/in_app_webview/in_app_webview.dart 304:9                                   <fn>
packages/flutter/src/widgets/_html_element_view_web.dart 65:30                                                   <fn>
ZiyadF296 commented 2 weeks ago

Hey; any updates on this issue?