This is my code:-

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

 
// ignore: must_be_immutable
class PostDetail extends StatefulWidget {
  final String text;
  final String id;
  String js ="document.querySelector('meta[name=\"viewport\"]').setAttribute('content', 'width=1024px, initial-scale='   (document.documentElement.clientWidth / 1024));";

  // receive data from the FirstScreen as a parameter
  PostDetail({required this.id, required this.text, key,}) : super(key: null);

  @override
  _PostDetailState createState() => _PostDetailState();
}

class _PostDetailState extends State<PostDetail> {
  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text(widget.id),
    ),
    body: WebviewScaffold(
      url: widget.id,
      withJavascript: true,
      withZoom: true, 
    ),
  );
}

Here I want to evaluate javascprit how can I evaluate javascprit in this code please share a working code to me Thanks in advance please share it Quickly.

CodePudding user response：

Future evaluateJavascript({@required String source}) : Evaluates JavaScript code into the WebView and returns the result of the evaluation. Future injectJavascriptFileFromUrl({@required String urlFile}) : Injects an external JavaScript file into the WebView from a defined url.

CodePudding user response：

In one of my Webview projects, I loaded my website in my Application without my websites Header and Footer. For that, I had to evaluate JavaScript.

You should use webview_flutter package instead.

I am have attached my Code snippet to this answer section below. I hope this helps you in some way. I evaluated javascript to remove the header and footer from my website in my Flutter APplication.

main.dart file code -->>

import 'package:flutter/material.dart';
import 'package:test2/webview.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: WebviewApp.id,
      routes: {
        WebviewApp.id: (context) => WebviewApp(),
      },
    );
  }
}

Webview Widget Code -->>

import 'dart:async';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebviewApp extends StatefulWidget {
  const WebviewApp({Key? key}) : super(key: key);
  static final String id = "webviewapp";

  @override
  _WebviewAppState createState() => _WebviewAppState();
}

class _WebviewAppState extends State<WebviewApp> {
  final Completer<WebViewController> _controller =
      Completer<WebViewController>();
  late WebViewController _webviewController;
  double progress = 0;
  bool isLoading = true;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (await _webviewController.canGoBack()) {
          _webviewController.goBack();
          return false;
        } else {
          return false;
        }
      },
      child: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            "WebView",
            style: TextStyle(
              color: Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.bold,
              fontFamily: "Poppins",
            ),
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 32.0),
              child: Row(
                children: [
                  IconButton(
                    visualDensity: const VisualDensity(horizontal: -4.0),
                    padding: EdgeInsets.zero,
                    icon: const Icon(Icons.clear),
                    onPressed: () {
                      _webviewController.clearCache();
                      CookieManager().clearCookies();
                    },
                  ),
                  IconButton(
                    visualDensity: const VisualDensity(horizontal: -4.0),
                    padding: EdgeInsets.zero,
                    icon: Icon(Icons.refresh),
                    onPressed: () {
                      _webviewController.reload();
                    },
                  ),
                ],
              ),
            )
          ],
        ),
        body: SizedBox(
          height: double.infinity,
          width: double.infinity,
          child: Column(
            children: [
              Expanded(
                child: Stack(
                  children: [
                    WebView(
                      gestureNavigationEnabled: true,
                      javascriptMode: JavascriptMode.unrestricted,
                      initialUrl: "https://mdkamrulislam.me",
                      onWebViewCreated: (WebViewController webviewController) {
                        _webviewController = webviewController;
                        _controller.complete(webviewController);
                      },
                      onProgress: (int progress) {
                        // ignore: avoid_print
                        print("WebView is loading (progress : $progress%)");
                      },
                      onPageFinished: (String url) {
                        // ignore: avoid_print
                        print('Page finished loading: $url');
                        setState(() {
                          isLoading = false;
                        });

                        _webviewController
                            .evaluateJavascript(
                              "javascript:(function() { "  
                                  "var header = document.querySelector('header');"  
                                  "header.remove();"  
                                  "var footer = document.querySelector('footer');"  
                                  "footer.remove();"  
                                  "})()",
                            )
                            .then(
                              (value) => debugPrint(
                                  'Page finished loading Javascript'),
                            )
                            .catchError(
                              (onError) => debugPrint('$onError'),
                            );
                      },
                      // ignore: prefer_collection_literals
                      gestureRecognizers: Set()
                        ..add(Factory(() => VerticalDragGestureRecognizer())),
                    ),
                    isLoading
                        ? Stack(
                            children: const [
                              Scaffold(
                                backgroundColor: Colors.black,
                                body:
                                    Center(child: CircularProgressIndicator()),
                              )
                            ],
                          )
                        : Stack()
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

NOTES: I evaluated javascript by selecting the HTML tags that I used in my website.

document.querySelector(header)

You can also evaluate by selecting a class name or id name or tag name.

For selecting a class name the format should be -->>

document.querySelector(.className)

For selecting id name the format should be -->>

document.querySelector(#idName)

For selecting a tag name the format should be -->>

document.querySelector(tagName)