postMessage didn't work in html

[szwang1]

`

Web Page

Click the button to send a message to the embedded app:

Send Message ` in flutter,

final Set<JavascriptChannel> jsChannels = [ JavascriptChannel( name: 'Print', onMessageReceived: (JavascriptMessage message) { print(message.message); _controller.sendJavaScriptChannelCallBack( false, "{'code':'200','message':'print succeed!'}", message.callbackId, message.frameId); }), ].toSet(); //normal JavaScriptChannels await _controller.setJavaScriptChannels(jsChannels);

if use Print.postMessage, it shows 'Uncaught ReferenceError: Print.postMessage is not defined' if use Print("hello-from js"), nothing happened.

so how to call js in flutter?

[SinyimZhi]

@szwang1 jschannel for webview_cef is very similar to webview_flutter, but not really same. we don't need to call postMessage. just use Print("hello-from js") is a true way,when you called it, flutter will print "hello-from js" on console board, and call the jscallback if you set. we can send a callback function use like Print("hello-from js",function abc(e){console.log(e);}) , then you will find 'e' is second param you set at sendJavaScriptChannelCallBack.

[szwang1]

@SinyimZhi > @szwang1 jschannel for webview_cef is very similar to webview_flutter, but not really same. we don't need to call postMessage. just use Print("hello-from js") is a true way,when you called it, flutter will print "hello-from js" on console board, and call the jscallback if you set. we can send a callback function use like Print("hello-from js",function abc(e){console.log(e);}) , then you will find 'e' is second param you set at sendJavaScriptChannelCallBack.

yeah! I used Print and it worked before but now nothing happened. No console log and no error.

But I found flutter error during macos development below, something wring?

Class AXPlatformNodeCocoa is implemented in both /myapppath/Contents/Frameworks/FlutterMacOS.framework/Versions/A/FlutterMacOS (0x109f56fd8) and /myapppath/Contents/Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework (0x17f41acc0). One of the two will be used. Which one is undefined. objc[48048]: Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x22308ec60) and /myapppath/Contents/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x162b65560). One of the two will be used. Which one is undefined. [0731/100743.175826:ERROR:system_network_context_manager.cc(758)] Cannot use V8 Proxy resolver in single process mode. [0731/100743.177579:ERROR:system_network_context_manager.cc(758)] Cannot use V8 Proxy resolver in single process mode.

[RakshithSarja]

@SinyimZhi @hlwhl I am using the latest package of webview_cef on windows ,I tried to post message in JS and get the same error in console "Uncaught ReferenceError: Print is not defined" as shown in the attached snapshot . It would be helpful if you can share code snippet showing how to send message from JS to Flutter and vice versa? If I have to send string data to and from JS how can I do it with this package?

Your help is much appreciated.

[SinyimZhi]

@RakshithSarja @szwang1 sry, i was on vacation a while ago. Actually, my code is in example/main.dart. According to the error message, it seems to be a unique issue on the Mac because the v8 engine is not working properly. We will try to fix this issue on Mac, but it may take a lot of time as our technology stack is mostly on Windows and Linux.

[RakshithSarja]

HI @SinyimZhi Thanks for your response. The issue what I am facing is on windows only.

[SinyimZhi]

HI @SinyimZhi Thanks for your response. The issue what I am facing is on windows only.

@RakshithSarja if you change the url , you should excute jschannels or any js code you want to provide to web agin.

[ryanlee92]

I got same error, and I think this error is came from

Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x238291958) and /Users/ryan/Development/fillin/build/macos/Build/Products/Debug/example.app/Contents/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x2a257d560). One of the two will be used. Which one is undefined.

[SinyimZhi]

I got same error, and I think this error is came from

Class WebSwapCGLLayer is implemented in both /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x238291958) and /Users/ryan/Development/fillin/build/macos/Build/Products/Debug/example.app/Contents/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x2a257d560). One of the two will be used. Which one is undefined.
```：

I have conducted an in-depth investigation into the error message you mentioned and found that the error message may be caused by various issues. 1. As the Pod-related frameworks introduce parameters that are automatically generated, there may be a formatting issue that requires adjustments to the automation script.Reference document:https://developer.apple.com/forums/thread/47579、https://developer.apple.com/forums/thread/698628. 2.Xcode itself may introduce bugs. Reference documents: https://discuss.circleci.com/t/xcode-15-beta-4-released/48645, https://github.com/nodejs/node-gyp/issues/569 @ryanlee92

[gentlemenKin]

is there any solution about this issue ,i found same issue on my mac

[903531306]

@SinyimZhi>@szwang1webview_cef 的 jschannel 与 webview_flutter 非常相似，但并不完全相同。我们不需要调用 postMessage。只需使用 Print("hello-from js") 才是真正的方法，当你调用它时，flutter 会在控制台上打印“hello-from js”，并根据你的设置调用 jscallback。我们可以发送一个回调函数，如_Print("hello-from js",function abc(e){console.log(e);})_，然后你会发现 'e' 是你在 sendJavaScriptChannelCallBack 设置的第二个参数。

是的！我使用“打印”，以前可以用，但现在什么也没发生。没有控制台日志，也没有错误。

但是我在下面的macos开发过程中发现flutter错误，有什么问题吗？

AXPlatformNodeCocoa 类在 /myapppath/Contents/Frameworks/FlutterMacOS.framework/Versions/A/FlutterMacOS (0x109f56fd8) 和 /myapppath/Contents/Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework (0x17f41acc0) 中实现。将使用两者之一。哪一个是未定义的。 objc[48048]：类 WebSwapCGLLayer 在 /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x22308ec60) 和 /myapppath/ 中实现内容/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x162b65560)。将使用两者之一。哪一个是未定义的。 [0731/100743.175826:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。 [0731/100743.177579:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。

@szwang1 jschannel for webview_cef is very similar to webview_flutter, but not really same. we don't need to call postMessage. just use Print("hello-from js") is a true way,when you called it, flutter will print "hello-from js" on console board, and call the jscallback if you set. we can send a callback function use like Print("hello-from js",function abc(e){console.log(e);}) , then you will find 'e' is second param you set at sendJavaScriptChannelCallBack.

请问这个问题修复了嘛，目前我使用了最新代码，js不能通，控制台打印了undefined，我是在windows上

Flutter 3.7.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9944297138 (1 year, 3 months ago) • 2023-02-08 15:46:04 -0800 Engine • revision 248290d6d5 Tools • Dart 2.19.2 • DevTools 2.20.1

[SinyimZhi]

@SinyimZhi>@szwang1webview_cef 的 jschannel 与 webview_flutter 非常相似，但并不完全相同。我们不需要调用 postMessage。只需使用 Print("hello-from js") 才是真正的方法，当你调用它时，flutter 会在控制台上打印“hello-from js”，并根据你的设置调用 jscallback。我们可以发送一个回调函数，如_Print("hello-from js",function abc(e){console.log(e);})_，然后你会发现 'e' 是你在 sendJavaScriptChannelCallBack 设置的第二个参数。

是的！我使用“打印”，以前可以用，但现在什么也没发生。没有控制台日志，也没有错误。 但是我在下面的macos开发过程中发现flutter错误，有什么问题吗？ AXPlatformNodeCocoa 类在 /myapppath/Contents/Frameworks/FlutterMacOS.framework/Versions/A/FlutterMacOS (0x109f56fd8) 和 /myapppath/Contents/Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework (0x17f41acc0) 中实现。将使用两者之一。哪一个是未定义的。 objc[48048]：类 WebSwapCGLLayer 在 /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x22308ec60) 和 /myapppath/ 中实现内容/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x162b65560)。将使用两者之一。哪一个是未定义的。 [0731/100743.175826:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。 [0731/100743.177579:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。

@szwang1 jschannel for webview_cef is very similar to webview_flutter, but not really same. we don't need to call postMessage. just use Print("hello-from js") is a true way,when you called it, flutter will print "hello-from js" on console board, and call the jscallback if you set. we can send a callback function use like Print("hello-from js",function abc(e){console.log(e);}) , then you will find 'e' is second param you set at sendJavaScriptChannelCallBack.

请问这个问题修复了嘛，目前我使用了最新代码，js不能通，控制台打印了undefined，我是在windows上

Flutter 3.7.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9944297138 (1 year, 3 months ago) • 2023-02-08 15:46:04 -0800 Engine • revision 248290d6d5 Tools • Dart 2.19.2 • DevTools 2.20.1

你这不是没通啊，你没写回调函数啊。。。undifined代表你Print函数没有任何返回值。这个Print函数的功能是在flutter的控制台输出你在js控制台传给Print函数的第一个参数，第二个参数可选参数，是你要在js侧定义的回调函数。sendJavaScriptChannelCallBack传递回去的参数是需要你在js测定义的函数来处理的。你看看我截图里是如何调用Print函数的，我在调用Print函数时也是输出undefined的，我的message输出是我传递的回调函数里的console.log(e)输出的。e就是sendJavaScriptChannelCallBack传递回js侧的参数。

[SinyimZhi]

@903531306

[903531306]

@SinyimZhi>@szwang1webview_cef 的 jschannel 与 webview_flutter 非常相似，但并不完全相同。我们不需要调用 postMessage。只需使用 Print("hello-from js") 才是真正的方法，当你调用它时，flutter 会在控制台上打印“hello-from js”，并根据你的设置调用 jscallback。我们可以发送一个回调函数，如_Print("hello-from js",function abc(e){console.log(e);})_，然后你会发现 'e' 是你在 sendJavaScriptChannelCallBack 设置的第二个参数。

是的！我使用“打印”，以前可以用，但现在什么也没发生。没有控制台日志，也没有错误。 但是我在下面的macos开发过程中发现flutter错误，有什么问题吗？ AXPlatformNodeCocoa 类在 /myapppath/Contents/Frameworks/FlutterMacOS.framework/Versions/A/FlutterMacOS (0x109f56fd8) 和 /myapppath/Contents/Frameworks/Chromium Embedded Framework.framework/Chromium Embedded Framework (0x17f41acc0) 中实现。将使用两者之一。哪一个是未定义的。 objc[48048]：类 WebSwapCGLLayer 在 /System/Library/Frameworks/WebKit.framework/Versions/A/Frameworks/WebCore.framework/Versions/A/Frameworks/libANGLE-shared.dylib (0x22308ec60) 和 /myapppath/ 中实现内容/Frameworks/Chromium Embedded Framework.framework/Libraries/libGLESv2.dylib (0x162b65560)。将使用两者之一。哪一个是未定义的。 [0731/100743.175826:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。 [0731/100743.177579:错误:system_network_context_manager.cc(758)] 无法在单进程模式下使用 V8 代理解析器。

@szwang1 jschannel for webview_cef is very similar to webview_flutter, but not really same. we don't need to call postMessage. just use Print("hello-from js") is a true way,when you called it, flutter will print "hello-from js" on console board, and call the jscallback if you set. we can send a callback function use like Print("hello-from js",function abc(e){console.log(e);}) , then you will find 'e' is second param you set at sendJavaScriptChannelCallBack.

请问这个问题修复了嘛，目前我使用了最新代码，js不能通，控制台打印了undefined，我是在windows上 Flutter 3.7.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9944297138 (1 year, 3 months ago) • 2023-02-08 15:46:04 -0800 Engine • revision 248290d6d5 Tools • Dart 2.19.2 • DevTools 2.20.1

你这不是没通啊，你没写回调函数啊。。。undifined代表你Print函数没有任何返回值。这个Print函数的功能是在flutter的控制台输出你在js控制台传给Print函数的第一个参数，第二个参数可选参数，是你要在js侧定义的回调函数。sendJavaScriptChannelCallBack传递回去的参数是需要你在js测定义的函数来处理的。你看看我截图里是如何调用Print函数的，我在调用Print函数时也是输出undefined的，我的message输出是我传递的回调函数里的console.log(e)输出的。e就是sendJavaScriptChannelCallBack传递回js侧的参数。

这个接入是你上边的，控制两种我都试了，

@903531306

@903531306

两种我的控制台一个都没打印，这是为啥呀，我的哪里有问题么，好像是flutter的回调进不来

[SinyimZhi]

我研究一下。。 @903531306

[SinyimZhi]

能分享一下你对插件本身代码的所有改动么？比如一个diff文件或截图。 @903531306

[903531306]

能分享一下你对插件本身代码的所有改动么？比如一个diff文件或截图。 @903531306

这个报错我就屏蔽了

webview_textinput 这个文件我目前的flutter的版本低，所有我把这个也屏蔽了 // @override // insertContent(KeyboardInsertedContent content) {}

download.cmake 这个文件里边我修改了下载zip的地址， 只是把gitHub的下载下来传到我的文件服务器了，这个应该不影响吧

Flutter 3.7.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9944297138 (1 year, 3 months ago) • 2023-02-08 15:46:04 -0800 Engine • revision 248290d6d5 Tools • Dart 2.19.2 • DevTools 2.20.1

[SinyimZhi]

你截图的地方影响的，这个是把cef的回调从cef消息循环线程传递到flutter engine线程的PostMessage.因为flutter官方不建议method channel的invoke在非flutter engine线程调用，所以这里做了个传递。你这行注释掉就没有cef消息循环线程到flutter engine线程间的通讯了 @903531306 这里不应该报错的，你把报错信息详细点的发我看看。

[SinyimZhi]

不对啊。。看你这个代码不是最新的啊。。。

[903531306]

你截图的地方影响的，这个是把cef的回调从cef消息循环线程传递到flutter engine线程的PostMessage.因为flutter官方不建议method channel的invoke在非flutter engine线程调用，所以这里做了个传递。你这行注释掉就没有cef消息循环线程到flutter engine线程间的通讯了 @903531306 这里不应该报错的，你把报错信息详细点的发我看看。

G:\Demo\webview_cef\example\windows\flutter\ephemeral.plugin_symlinks\webview_cef\windows\webview_cef_plugin.cpp(211,73): error C3481: ��hwnd��: δ�ҵ� lambda ������� [G:\Demo\webview_cef\example\build\windows\plugins\webview_cef\webview_cef_plugin.vcxproj] G:\Demo\webview_cef\example\windows\flutter\ephemeral.plugin_symlinks\webview_cef\windows\webview_cef_plugin.cpp(214,32): error C2039: "m_hwnds": ���� "webview_cef::WebviewCefPlugin" �ij�Ա [G:\Demo\webview_cef\example\build\windows\plugins\webview_cef\webview_cef_plugin.vcxproj] G:\Demo\webview_cef\example\windows\flutter\ephemeral.plugin_symlinks\webview_cef\windows\webview_cef_plugin.cpp(214,32): error C2039: "__this": ���� "webview_cef::WebviewCefPlugin" �ij�Ա [G:\Demo\webview_cef\example\build\windows\plugins\webview_cef\webview_cef_plugin.vcxproj] Exception: Build process failed.

如果打开屏蔽的代码，就报这个错误

[903531306]

不对啊。。看你这个代码不是最新的啊。。。

我就是github下载最新的，main分支，上周拉的代码

[SinyimZhi]

我的我的，这台设备上的版本不对，我再看下。。

[903531306]

我的我的，这台设备上的版本不对，我再看下。。 没更改之前 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get(), hwnd](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnds, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 更改之后 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get()](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnd, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 这句代码做了更改现在收到消息了，

[SinyimZhi]

我的我的，这台设备上的版本不对，我再看下。。 没更改之前 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get(), hwnd](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnds, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 更改之后 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get()](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnd, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 这句代码做了更改现在收到消息了，

是的，是要这么改，我刚也验证了下，这个属于之前合并代码的时候自动合并出的问题，感谢你帮我们找到问题。我把代码推上去吧。

[903531306]

我的我的，这台设备上的版本不对，我再看下。。 没更改之前 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get(), hwnd](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnds, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 更改之后 plugin->m_plugin->setInvokeMethodFunc([plugin_pointer = plugin.get()](std::string method, WValue* arguments) { flutter::EncodableValue* methodValue = new flutter::EncodableValue(method); flutter::EncodableValue* args = new flutter::EncodableValue(encode_wvalue_to_flvalue(arguments)); PostMessage(plugin_pointer->m_hwnd, WM_USER + 1, WPARAM(methodValue), LPARAM(args)); }); 这句代码做了更改现在收到消息了，

是的，是要这么改，我刚也验证了下，这个属于之前合并代码的时候自动合并出的问题，感谢你帮我们找到问题。我把代码推上去吧。

好的，感谢帮忙解决问题！

[SinyimZhi]

再次感谢，如果你后续有发现问题并且我们可能没有及时回复，也欢迎你尝试解决并提交PR。 @903531306

[SinyimZhi]

@uppet 感谢 几乎和我们同时发现并解决了问题。

[903531306]

你截图的地方影响的，这个是把cef的回调从cef消息循环线程传递到flutter engine线程的PostMessage.因为flutter官方不建议method channel的invoke在非flutter engine线程调用，所以这里做了个传递。你这行注释掉就没有cef消息循环线程到flutter engine线程间的通讯了 @903531306 这里不应该报错的，你把报错信息详细点的发我看看。

目前我有遇到一个问题，昨天使用github的项目测试js都可以了， 但是我今天将demo放到我的项目中，webview显示都是正常的，我调用js方法也是通的，但是js调用我的又收不到消息，我在昨天的方法打印了东西，他也有打印说明是通的，但是flutter的onMessageReceived没有收到消息

依赖方式： webview_cef: path: ./webview_cef

这是我打印说明他是通的，

我在控制台输入 Print ReferenceError: Printis not defined 没有报这个错误，说明也是注册成功的，但是目前就是没有回调。

[903531306]

你截图的地方影响的，这个是把cef的回调从cef消息循环线程传递到flutter engine线程的PostMessage.因为flutter官方不建议method channel的invoke在非flutter engine线程调用，所以这里做了个传递。你这行注释掉就没有cef消息循环线程到flutter engine线程间的通讯了 @903531306 这里不应该报错的，你把报错信息详细点的发我看看。

目前我有遇到一个问题，昨天使用github的项目测试js都可以了， 但是我今天将demo放到我的项目中，webview显示都是正常的，我调用js方法也是通的，但是js调用我的又收不到消息，我在昨天的方法打印了东西，他也有打印说明是通的，但是flutter的onMessageReceived没有收到消息

依赖方式： webview_cef: path: ./webview_cef

这是我打印说明他是通的，

我在控制台输入 Print ReferenceError: Printis not defined 没有报这个错误，说明也是注册成功的，但是目前就是没有回调。

我找到问题了，在main里边有加这一段代码，应该在文档要注明下，

//add this line to enable cef keybord input
handleWndProcForCEF(msg.hwnd, msg.message, msg.wParam, msg.lParam);

[SinyimZhi]

你截图的地方影响的，这个是把cef的回调从cef消息循环线程传递到flutter engine线程的PostMessage.因为flutter官方不建议method channel的invoke在非flutter engine线程调用，所以这里做了个传递。你这行注释掉就没有cef消息循环线程到flutter engine线程间的通讯了 @903531306 这里不应该报错的，你把报错信息详细点的发我看看。

目前我有遇到一个问题，昨天使用github的项目测试js都可以了， 但是我今天将demo放到我的项目中，webview显示都是正常的，我调用js方法也是通的，但是js调用我的又收不到消息，我在昨天的方法打印了东西，他也有打印说明是通的，但是flutter的onMessageReceived没有收到消息 依赖方式： webview_cef: path: ./webview_cef 这是我打印说明他是通的， 我在控制台输入 Print ReferenceError: Printis not defined 没有报这个错误，说明也是注册成功的，但是目前就是没有回调。

我找到问题了，在main里边有加这一段代码，应该在文档要注明下，

//add this line to enable cef keybord input
handleWndProcForCEF(msg.hwnd, msg.message, msg.wParam, msg.lParam);

是的要加上，这块我写一下吧 之前是直接在cef事件循环线程直接发methodchannel invoke的。

[903531306]

Print("hello-from js",function abc(e){console.log(e);})

我发现如果是同域名的链接，使用同时注入js，_controller2找不到Print，我还试了使用不同的链接注入都可以正常的，这是为啥， _controller.setJavaScriptChannels(jsChannels); _controller2.setJavaScriptChannels(jsChannels);