CODEWITHSUNDEEP
javascriptwebviewflutter
GPH
GPH

Reputation: 1161

Flutter webview with javascript enable

Flutter plugin webview and use javascript to print the web page, but only the javascript is not working in webview. Please kindly help to solve this issue.

Flutter code:

Future<Null> _launchInWebViewWithJavaScript(String url) async {
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: true,
        forceWebView: false,
        enableJavaScript: true,
      );
    } else {
      throw 'Could not launch $url';
    }
  }

Webpage code (php, javascript and html):

<?php
    $qrString = $_GET['qrString'];
    $tableNumber = $_GET['tableNumber'];
?>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>receipt</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="../paper.css">
  <style>
    @page { size: 75mm 100mm } /* output size */
    body.receipt .sheet { width: 58mm; height: 100mm } /* sheet size */
    @media print { body.receipt { width: 58mm } } /* fix for Chrome */
  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

</head>

<body class="receipt">
  <section class="sheet padding-10mm">
        <?php echo '<h1>檯號: '.$tableNumber. '</h1><br>' ?>


      <img id='barcode' 
            src=<?php echo 'https://api.qrserver.com/v1/create-qr-code/?data=' .$qrString. '&amp;size=300x300' ?>
            alt="" 
            title="HELLO" 
            width="300" 
            height="300" />
  </section>
</body>

<script type="text/javascript">
<!--
window.print();
</script>
</html>

The webpage is working fine with browser Chrome and Safari. enter image description here

Upvotes: 2

Views: 18543

Answers (2)

Ramees
Ramees

Reputation: 76

Use flutter_webview_plugin: Following will be route code

routes: {
"/webview": (_) => WebviewScaffold(
url: url,
appBar: AppBar(
title: Text("Webview"),
),
withJavascript: true,
withLocalStorage: true,
withZoom: true,
)
},

Upvotes: 2

Anurag Vohra
Anurag Vohra

Reputation: 1973

May be too late to answer, but for my case it solved by upgrading webview from playstore. Earlier before this my webview was complaining about ES^ syntaxes like arrow function and spread operator. Aftre this it works all fine!

Upvotes: 2

Related Questions