如何从 Flutter Code for Flutter-Web 中设置 index.html 中定义的 js 属性答案

【问题标题】：How to set the js attributes defined in index.html from Flutter Code for Flutter-Web如何从 Flutter Code for Flutter-Web 中设置 index.html 中定义的 js 属性
【发布时间】：2021-01-12 11:45:06
【问题描述】：

所以我正在我的 Flutter Web 项目中实现 RazorPay 支付网关。支付网关已成功实施。但我的问题是我们如何设置 index.html 文件中定义的 Javascript 属性。

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <meta name="viewport" content="width=device-width">
  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="razorpay_payment_with_flutter">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>razorpay_payment_with_flutter</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  <script>

       var options = {
         "key": "my-api-key",
          "amount": "10000", "currency": "INR",
          "name": "Aniket Ambore",
          "description": "Just a flutter web project",
          "image": "https://i.ibb.co/BCwcPzN/Pngtree-flat-lay-home-office-concept-4341518.jpg",
          "handler": function (response){
             window.parent.postMessage("SUCCESS","*");      //2
             alert(response.razorpay_payment_id);
             alert(response.razorpay_order_id);
             alert(response.razorpay_signature)
          },
          "prefill": {
             "name": "",
             "email": "",
             "contact": ""
           },
           "notes": {
             "address": "Autofy"
          },
          "theme": {
             "color": "#DF0145"
          },
          "modal": {
            "ondismiss": function(){
               window.parent.postMessage("MODAL_CLOSED","*");   //3
            }
          }
       };

       var rzp1 = new Razorpay(options);
       window.onload = function(e){  //1
          rzp1.open();
          e.preventDefault();
       }

     </script>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

以上代码是我更新后的index.html的小sn-p。以及如何从我的颤振项目中设置 var options 映射的 key。假设如果我想更改 amount 的值，我如何将它从我的 dart 文件 传递到 index.html 。 p>

我的颤振医生

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel master, 1.21.0-9.0.pre, on Microsoft Windows [Version 10.0.17134.1304], locale en-IN)

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] IntelliJ IDEA Community Edition (version 2019.2)
[√] Connected device (3 available)

! Doctor found issues in 1 category.

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <meta name="viewport" content="width=device-width">
  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="razorpay_payment_with_flutter">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>razorpay_payment_with_flutter</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  <script>

       var options = {
         "key": "my-api-key",
          "amount": "10000", "currency": "INR",
          "name": "Aniket Ambore",
          "description": "Just a flutter web project",
          "image": "https://i.ibb.co/BCwcPzN/Pngtree-flat-lay-home-office-concept-4341518.jpg",
          "handler": function (response){
             window.parent.postMessage("SUCCESS","*");      //2
             alert(response.razorpay_payment_id);
             alert(response.razorpay_order_id);
             alert(response.razorpay_signature)
          },
          "prefill": {
             "name": "",
             "email": "",
             "contact": ""
           },
           "notes": {
             "address": "Autofy"
          },
          "theme": {
             "color": "#DF0145"
          },
          "modal": {
            "ondismiss": function(){
               window.parent.postMessage("MODAL_CLOSED","*");   //3
            }
          }
       };

       var rzp1 = new Razorpay(options);
       window.onload = function(e){  //1
          rzp1.open();
          e.preventDefault();
       }

     </script>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

razorpay_web.dart

import 'package:flutter/material.dart';
import 'dart:html';
import 'dart:ui' as ui;
import 'ui_fake.dart' if (dart.library.html) 'dart:ui' as ui;

class RazorPayWeb extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    //register view factory
    ui.platformViewRegistry.registerViewFactory("rzp-html",(int viewId) {
      IFrameElement element=IFrameElement();
      //Event Listener
      window.onMessage.forEach((element) {
        print('---------------------------Event Received in callback: ${element.data}');
        if(element.data=='MODAL_CLOSED'){
          Navigator.pop(context);
        }else if(element.data=='SUCCESS'){
          print('PAYMENT SUCCESSFULL!!!!!!!');
        }
      });

    element.requestFullscreen();
    //element.src='assets/html/payment.html';
    element.style.border = 'none';
    return element;
  });

    return Scaffold(
        body: Builder(builder: (BuildContext context) {
          return Container(
            child: HtmlElementView(viewType: 'rzp-html'),
          );
        }));
  }
}

ui_fake.dart

import 'dart:ui' as ui;

// ignore: camel_case_types
class platformViewRegistry {
  static registerViewFactory(String viewId, dynamic cb) {
    ui.platformViewRegistry.registerViewFactory(viewId, cb);
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:razorpay_flutter/razorpay_flutter.dart';
import 'package:flutter/services.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:razorpay_payment_with_flutter/WebImplementation/razorpay_web.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: RazorPayWeb(),
    );
  }
}

此外，代码不处理 razorpay_flutter 插件，因为它不适合 Flutter_Web。

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

使用srddoc 属性，而不是IFrameElement 对象的src 属性来传递您的整个HTML 内容。您可以结合字符串插值来传递属性。

这是一个例子：

//register view factory
    ui.platformViewRegistry.registerViewFactory("rzp-html",(int viewId) {
      IFrameElement element=IFrameElement();
      //Event Listener
      window.onMessage.forEach((element) {
        print('---------------------------Event Received in callback: ${element.data}');
        if(element.data=='MODAL_CLOSED'){
          Navigator.pop(context);
        }else if(element.data=='SUCCESS'){
          print('PAYMENT SUCCESSFULL!!!!!!!');
        }
      });

    element.requestFullscreen();
    // ****************** change you need to make *************
    element.srcdoc = '<html><p>Your entire HTML content with an ${attribute}</p></html>';
    element.style.border = 'none';
    return element;
  });

【讨论】：