CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
KDC
KDC

Reputation: 611

How to inject a simple code in Flutter WebView to hide a part of the website (footer)?

I'm new to Flutter, and currently, I'm making a very simple app, which is just a WebView. My question is how can I insert this code into my Flutter WebView?

footer#footer, div#st_notification_1, #sidebar_box {
    display: none!important;
}

As of the moment, I'm trying to use WebView plugin by the Flutter Team on one of my application tabs. The website I'm trying to load and hiding the footer after is:

Syncshop

below is my code for that tab Webview that I'm trying to hide the footer

UPDATED: FIXED IT. The code below is working for me Note: I also re-inspect the website and changed the getElementsById to getElementsByClassName corresponding to the class name of the footer on the website above.

Note2: There are plenty of WebView apps in Flutter packages, I'm using the Flutter Webview by the Flutter team.

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

class ProfileAccount extends StatefulWidget {
  ProfileAccount({Key key}) : super(key: key);

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

class _ProfileAccountState extends State<ProfileAccount> {
    WebViewController _myController;
    final Completer<WebViewController> _controller =
     Completer<WebViewController>();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
          child: Scaffold(
            body: WebView(
              initialUrl: 'https://syncshop.online/en/login',
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _myController = controller;
              },
          onPageFinished: (initialUrl) {
            _myController.evaluateJavascript("document.getElementsByClassName('footer-container')[0].style.display='none';");
          },
        )
      ),
    );
  }
}

Upvotes: 9

Views: 11189

Answers (2)

Kiran Maniya
Kiran Maniya

Reputation: 9009

You can try

flutterWebviewPlugin.evalJavascript('alert("Hello World")')

Remember that the evalJavascript() expects the JS not HTML, So you can't use like

flutterWebviewPlugin.evalJavascript('<script language="JavaScript" type="text/javascript">alert("Hello World")</script>')

Here is the complete example for your reference,

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

class JSInWebView extends StatefulWidget {
  @override
  JSInWebViewState createState() {
    return new JSInWebViewState();
  }
}

class JSInWebViewState extends State<JSInWebView> {
  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  // alternatively you can define variable as var js = "YOUR_SCRIPT"; and use it inside evalJavascript

  @override
  void initState(){
    super.initState();
    flutterWebviewPlugin.evalJavascript("alert('Hi, I just executed')");
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: 'https://google.com',
      hidden: true,
      appBar: AppBar(title: Text("Elite")),
    );
  }
}

Upvotes: 8

Emilie
Emilie

Reputation: 285

Thanks for the answers here. I combined them with this javascript answer to make a function for easily injecting a full css file. This is handy if you have a large number of overrides or you want to track them over time in a separate file.

In your webview:

onPageFinished: (finish) async {
    // Override CSS values
    String overrideJs = await jsInjectionString(context, 'assets/my_css_override.css');
    _webController.evaluateJavascript(overrideJs);    
 },

Elsewhere:

  // Build the javascript injection string to override css
  Future<String> jsInjectionString(BuildContext context, String asset) async {
    String cssOverride = await loadStringAsset(context, asset);
    return "const cssOverrideStyle = document.createElement('style');"
        "cssOverrideStyle.textContent = `$cssOverride`;"
        "document.head.append(cssOverrideStyle);";
  }

  // Load a string asset
  Future<String> loadStringAsset(BuildContext context, String asset) async {
    return await DefaultAssetBundle.of(context).loadString(asset);
  }

Upvotes: -1

Related Questions