标签: flutterwebviewplugin

我正在构建一个 Flutter 应用程序，它将在应用程序中的某个时刻打开一个 web 视图，访问我的 SSO 应用程序后面的网页。

截至目前，当用户使用flutter_AppAuth插件（[ https://pub.dev/packages/flutter_appauth][1]）登录时，用户将获得一个存储在应用程序中的令牌。

当用户单击安全站点的链接时，应用程序会在 Web 视图 ( https://pub.dev/packages/flutter_webview_plugin ) 中打开 URL ，并将令牌放置在标头中，并被验证为已登录的用户我的问题曾经出现在此页面上，即使之前已接受令牌，单击网页上的另一个链接也会强制我进入 sso 登录页面。

我的问题是如何确保令牌被存储并在用户浏览网页时使用以确保他们不必再次登录？

我正在尝试什么：

在 flutter WebView 中打开本地主机。我正在使用这个插件，这个项目正在 Django 中运行，URL 为：http://127.0.0.1:8000/。我想在我的 flutter 应用程序中打开它。

我尝试过的：

搜索SO答案后，URL：http://myIPaddress:8000/。

更新

我通过手机提供互联网。

我使用的http://192.168.43.55:8080/不起作用，而且http://192.168.43.1:8080/

任何建议都会起作用，谢谢。

我想通过我的 flutter 应用程序中的 canvas 上传图片，这就是我第一次使用 flutter-webview-plugin 的原因，因此我无法解决这个问题。

相同的代码是：-

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


class SettingsPage extends KFDrawerContent {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {

  final Completer<WebViewController> _controller =
  Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                ....
              ],
            ),
            Expanded(
              child: Container(
                height: 500,
                child: WebView(
                  initialUrl: "https://shree-hari.github.io/laxmi_canva/index.html",
                  javascriptMode: JavascriptMode.unrestricted,
                  onWebViewCreated: (WebViewController webViewController){
                    _controller.complete(webViewController);
                  },
                ),
              ),
            )
          ],
        ),
      ),
    );

  } …

当用户单击 webview 中存在的按钮时，我想关闭我的 flutter 应用程序中的 webview

这是显示webview的代码

class WebViewApp extends StatefulWidget {
  @override
  _WebViewAppState createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return  WebviewScaffold(url: 'https://google.com',
        appBar: AppBar(
          title: Text('Test'),
          centerTitle: true,
          backgroundColor: kBlue,
          leading: BackButton(
            onPressed: (){
              Router.navigator.pop();
            },
          )
        ),
      );
  }
}

import 'package:cloud_firestore_web/cloud_firestore_web.dart';
import 'package:firebase_analytics_web/firebase_analytics_web.dart';
import 'package:firebase_auth_web/firebase_auth_web.dart';
import 'package:firebase_core_web/firebase_core_web.dart';
import 'package:fluttertoast/fluttertoast_web.dart';
import 'package:google_sign_in_web/google_sign_in_web.dart';
import 'package:pak_farmer/models/Register.dart';
import 'package:shared_preferences_web/shared_preferences_web.dart';
import 'package:flutter_web_plugins/flutter_web_plugins.dart';

// ignore: public_member_api_docs

void registerPlugins(Registrar registrar) {

  FirebaseFirestoreWeb.registerWith (registrar);
  FirebaseAnalyticsWeb.registerWith(registrar);
  FirebaseAuthWeb.registerWith(registrar);
  FirebaseCoreWeb.registerWith(registrar);
  FluttertoastWebPlugin.registerWith(registrar);
  GoogleSignInPlugin.registerWith(registrar);
  SharedPreferencesPlugin.registerWith(registrar);
  registrar**.registerMessageHandler();**
  
}

我已经写了这段代码，但它在最后一行给了我一个错误：

方法 'registerMessageHandler' 不是为类型 'Registrar' 定义的。

根据此博客，如果使用 Navigator 2.0 和/或（在我的情况下）GoRouter，您将无法再使用“WillPopScope”和 onWillPop 函数调用覆盖手机的后退按钮。Navigator 2.0 现在使用 PopRoute 来返回。

这会导致在 flutter 页面上使用 webview 时出现问题。如果用户导航到该 Web 视图中的另一个网页，然后单击手机上的后退按钮，他们自然会期望 Web 视图导航回上一个网页。但相反，它会让用户离开该页面并返回到之前的 flutter 页面。

有没有办法解决？我可以让我的后退按钮首先检查是否有controller.canGoBack()，就像我以前能够在旧的Navigator系统中所做的那样？

我开始使用 Flutter 的 WebView 插件在我的应用程序中显示 Facebook 提要。我想限制应用程序用户可以在应用程序 webview 中执行的操作，换句话说，我不希望他们能够访问我显示的初始页面之外的另一个其他 facebook 域。我不希望用户能够登录 Facebook，而不仅仅是能够看到这个不需要帐户的打开的 Facebook Feed。

我尝试托管 Facebook Page 插件，它是一个 iFrame 或 Javascript SDK 插件，但我没有任何运气，因为 webview 不是用来处理这个的。相反，我决定通过 URL 链接到 Facebook 页面。我想避免用户浏览整个 Facebook，所以我能想到的最好方法是限制 URL。

我正在使用 WebView 小部件：

return WebView(
   initialUrl: 'https://www.facebook.com/specific-facebook-page-here',
   javascriptMode: JavascriptMode.disabled,
);

有什么方法可以监控他们的 URL 并避免他们访问 Facebook 域的部分内容？

flutter_webview_plugin^0.3.11 我正在构建一个支付网关，在 3d 安全模式下我需要使用 Webview。使用 html 字符串类型的响应启动 Webview。

   return Scaffold(
  body: WebviewScaffold(
    withJavascript: true,
    key: _scaffoldKey,
    url: new Uri.dataFromString(widget.d3sc, mimeType: 'text/html').toString(),
  ),
);

它在屏幕上打印安全代码阶段。当我提交代码时，它会自动重定向到回调 url，但我无法设法连接或从该 url 获取响应。当提交代码并且页面被重定向以获得用于关闭 3d 安全支付的令牌时，我需要得到响应。有什么想法或解决方案吗？

尝试了下面的代码。虽然它打印了重定向的 url，但响应元素中没有 json 响应。

 webView.launch(new Uri.dataFromString(widget.d3sc, mimeType: 'text/html').toString() ,withJavascript: true, withLocalStorage: true);
  webView.show();

  webView.onUrlChanged.listen((String event) async {
    print("${event} even eevent");
    setState(() {
      webView
          .evalJavascript("document.documentElement.innerText")
          .then((response) => print("$response response response "));

    });
  });

我正在使用 Flutter webview 加载网站。但我想在加载时替换 HTML 元素。例如：

<span class="name">Replace text</span>

怎么做？

当我在 Flutter WebView 中点击网站上的照片上传输入时，我想从手机中选择并上传照片。我不知道如何解决这个问题。你能帮我吗？

网站代码如下：

<div class="foto-upload">\n    <label class="foto-buton">\n        <input type="file" name="resim" multiple="multiple" id="fileupload">\n        <i class="fa fa-upload"></i>\n        <span>FOTO\xc4\x9eRAF EKLE</span>\n        <b>YA DA S\xc3\x9cR\xc3\x9cKLE BIRAK</b>\n    </label>\n    <input type="hidden" name="thumb_id" id="thumb_id" value="">\n    <div class="foto-list">\n        <div class="foto-count">EKLED\xc4\xb0\xc4\x9e\xc4\xb0N\xc4\xb0Z FOTO\xc4\x9eRAF ADED\xc4\xb0: \n            <span id="mediaCount" data-total="0">0/10</span>\n            <span id="mediaStatus"></span>\n            <span id="filePercent"></span>\n        </div>\n        <ul>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n            <li><i class="fa fa-image"></i></li>\n        </ul>\n    </div>\n    <div …