文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从flutterWebviewPlugin.evalJavascript (addEventListener)检索javascript值

问如何从flutterWebviewPlugin.evalJavascript (addEventListener)检索javascript值
EN

Stack Overflow用户

提问于 2019-11-22 00:55:37

回答 1查看 7.3K关注 0票数 3

我有一个颤振代码片段，它从我的iframe页面监听postMessage。(flutter_webview_plugin：^0.3.9+1)

flutterWebviewPlugin.onStateChanged.listen((viewState) async {
    String script = 'window.addEventListener("message", receiveMessage, false);' +
            'function receiveMessage(event) {console.log(\'receiving data from child , data as follows: \',event.data)}';
    flutterWebviewPlugin.evalJavascript(script);
}

如果event.data返回特定值， camera 值将触发我的特定函数(调用相机插件等)，我希望触发特定的颤振函数。这意味着我的目标iFrame将尝试通过postMessage方法进行跨源通信。

对科多瓦来说，我可以这样做：

window.addEventListener( "message" , function( event )
{
  else if( event.data.indexOf( "camera" ) >= 0 )
        {
           //Trigger Camera Function

我该怎么做才能让人飘飘欲仙？

flutter

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-11-25 03:35:53

2你的解决办法：

解决方案1：推荐

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

final Set<JavascriptChannel> jsChannels = [
  JavascriptChannel(
      name: 'Print',
      onMessageReceived: (JavascriptMessage message) {
        print('message.message: ${message.message}');
      }),
].toSet();

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (_) => WebviewScaffold(
              url: Uri.dataFromString(
                      '<html><button onclick="Print.postMessage(\'test\');">Click me</button></html>',
                      mimeType: 'text/html')
                  .toString(),
              appBar: new AppBar(title: new Text("Widget webview")),
              javascriptChannels: jsChannels,
            ),
      },
    );
  }
}

I/颤振(22119)：message.message:测试

解决方案2：如果您想保留您的window.post。(也许您希望使用来自另一个平台的iframe )

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

final Set<JavascriptChannel> jsChannels = [
  JavascriptChannel(
      name: 'Print',
      onMessageReceived: (JavascriptMessage message) {
        print('message.message: ${message.message}');
      }),
].toSet();

void main() {
  final flutterWebviewPlugin = FlutterWebviewPlugin();
  flutterWebviewPlugin.onStateChanged.listen((state) async {
    if (state.type == WebViewState.finishLoad) {
      String script =
          'window.addEventListener("message", receiveMessage, false);' +
              'function receiveMessage(event) {Print.postMessage(event.data);}';
      flutterWebviewPlugin.evalJavascript(script);
    }
  });
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (_) => WebviewScaffold(
              url: Uri.dataFromString(
                      '<html><button onclick="window.postMessage(\'test\', \'*\');">Click me</button></html>',
                      mimeType: 'text/html')
                  .toString(),
              appBar: new AppBar(title: new Text("Widget webview")),
              javascriptChannels: jsChannels,
            ),
      },
    );
  }
}

I/颤振(22119)：message.message:测试

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  flutter_webview_plugin: 0.3.9+1

参考

票数 11

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58985946

复制

相似问题

问如何从flutterWebviewPlugin.evalJavascript (addEventListener)检索javascript值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从flutterWebviewPlugin.evalJavascript (addEventListener)检索javascript值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从flutterWebviewPlugin.evalJavascript (addEventListener)检索javascript值
EN