use WebView in flutter web without using iframe

Question

Is there a way to use WebView in Web Filter without the need for an iframe? Most of the methods available by iframe display website information and many sites also prohibit the use of iframe .

I'm looking for a way to use website information directly and without the need for iframe

I also tested the lower libraries and it didn't work

easy_web_view2

easy_web_view

webviewx

web_browser

in app webview

and ...

I dont have problem to show webview in Flutter webI have trouble displaying sites that have disabled the iFrame feature on their site .

Can you provide testing url and your criteria that how do you want exactly? — Pratik Butani, Nov 19 '21 at 05:56
@pratik-butani https://www.chartsaz.com/%D9%88%D8%B3%D9%BE%D9%87%D8%B1 this site or any site that prevent show iframe in your sites — hadi, Dec 04 '21 at 18:49

Ghanshyam Bhesaniya · Answer 1 · 2021-12-07T06:22:29.507

6

The flutter web directly not support any web view to load url. You have to use HtmlElementView to load URL.

import 'dart:ui' as ui;

@override
  void initState() {
    super.initState();
    
    ui.platformViewRegistry.registerViewFactory('openstreetmap', (int viewId) {
      return IFrameElement()
        ..style.width = '100%'
        ..style.height = '100%'
        ..src = 'https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik
'
        ..style.border = 'none';
    });
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'openstreetmap');
  }

edited Dec 07 '21 at 06:22

answered Dec 07 '21 at 05:54

Ghanshyam Bhesaniya

136
3

1

Undefined name 'platformViewRegistry'. – Ario Mar 26 '22 at 16:16
@coditori Checkout this : https://stackoverflow.com/a/64748486/1318946 – Pratik Butani May 24 '22 at 06:48

score -2 · Answer 2 · answered Nov 15 '21 at 03:01

Use webview_flutter: ^2.0.13 (or latest version)

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

class WebviewScreen extends StatelessWidget {
  const WebviewScreen({Key? key, required this.url}) : super(key: key);
  final String url;

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: WebView(
        initialUrl: 'http://www.chartsaz.com/',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

set usesCleartextTraffic property to true in your AndroidManifest file, like below.

<application
....
android:usesCleartextTraffic="true"
....>

This library is for Android and iPhone. I also mentioned in the question that I am looking for a suitable solution in Flutter web and a special event — hadi, Dec 04 '21 at 19:09

use WebView in flutter web without using iframe

2 Answers2