Блог

Главная - Вопросы по программированию - Как установить атрибуты js, определенные в index.html из кода Flutter для Flutter-Web

Как установить атрибуты js, определенные в index.html из кода Flutter для Flutter-Web

#flutter #flutter-web

#flutter #flutter-web

Вопрос:

Итак, я внедряю платежный шлюз RazorPay в свой веб-проект Flutter. Платежный шлюз был успешно реализован. Но мой вопрос в том, как мы можем установить атрибуты Javascript, определенные в index.html досье .

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 amp; 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 . И как мы можем установить ключ карты параметров var из моего проекта flutter.
Например, предположим, что если я хочу изменить значение суммы, как я могу передать его из моего файла dart в index.html .

Мой доктор флаттер

 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 amp; 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 .

Ответ №1:

Используйте srddoc свойство вместо src свойства IFrameElement объекта, чтобы передать весь ваш 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;
  });