alert() method doesn't work in WebView

I use the plugin webview_flutter to load a html page below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Amaze UI 在线调试</title>
  <link rel="stylesheet" href="/api/browser/proxy?url=http%3A%2F%2Fcdn.amazeui.org%2Famazeui%2F2.5.0%2Fcss%2Famazeui.min.css"/>
</head>
<body>
  <button onclick="alert(123456)">alert</button>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.5.0/js/amazeui.min.js"></script>
</body>
</html>

But when I click the button "alert", the alert dialog doesn't show in Flutter. I open the html in Chrome, everything works well.

Does alert() method not support in Flutter?

output of flutter doctor -v:

[✓] Flutter (Channel beta, v1.3.8, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
• Flutter version 1.3.8 at /Users/yumi/Library/Android/flutter
• Framework revision e5b1ed7 (4 weeks ago), 2019-03-06 14:23:37 -0800
• Engine revision f4951df
• Dart version 2.2.1 (build 2.2.1-dev.0.0 571ea80e11)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at /Users/yumi/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling
support)
• Platform android-28, build-tools 28.0.3
• ANDROID_HOME = /Users/yumi/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_152-release-1248-b01)
• All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 9.4.1, Build version 9F2000
• ios-deploy 2.0.0
• CocoaPods version 1.5.3

[✓] Android Studio (version 3.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 31.3.3
• Dart plugin version 182.5215
• Java version OpenJDK Runtime Environment (build
1.8.0_152-release-1248-b01)

[✓] Connected device (2 available)
• M5 Note • 621QECQP4P2HM • android-arm64 • Android 7.0 (API 24)
• VKY AL00 • WJX7N17815008179 • android-arm64 • Android 7.0 (API 24)

alert&confirm currently are not supported in webview_flutter , if u want it working , you must rebuild webview_flutter on native platform library or don't use alert in html(use self-build alert instead)

@yumi0629

Hi @yumi0629
are you referring to the first party plugin webview_flutter or the third party flutter_webview_plugin?
If the latter you may want to open an issue in the dedicated github, otherwise,
if you are still experiencing the issue with the latest stable version of Flutter
please provide your update flutter doctor -v
and your flutter run --verbose?
Also, to better address the issue, would be helpful
if you could post a reproducible minimal code sample
or the steps to reproduce the problem.
Thank you

When i using alert, I had a good experience.

onPageFinished: (url) async {
  try {
    var javascript = '''
      window.alert = function (e){
        Alert.postMessage(e);
      }
    ''';
    await _webViewController?.evaluateJavascript(javascript);
  } catch (_) {}
  setState(() {
     isLoading = false;
   });
},

JavascriptChannel(
  name: 'Alert',
  onMessageReceived: (JavascriptMessage message) {
    // TODO popup
  },
 )

When i using alert, I had a good experience.

onPageFinished: (url) async {
  try {
    var javascript = '''
      window.alert = function (e){
        Alert.postMessage(e);
      }
    ''';
    await _webViewController?.evaluateJavascript(javascript);
  } catch (_) {}
  setState(() {
     isLoading = false;
   });
},

JavascriptChannel(
  name: 'Alert',
  onMessageReceived: (JavascriptMessage message) {
    // TODO popup
  },
 )

What is your configuration?
You try whit popup directly in web site?

For anyone interested in working on this, the approach we would want to take is to delegate the alert information to the plugin client via a Dart callback, rather than implementing a specific native UI. (If someone wants native UI, they can then implement that callback by calling a plugin that shows native dialogs.)

[webview_flutter] Implement platform interface for JavaScript dialog (#…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

[webview_flutter] Implement platform interface for JavaScript dialog (f…

Navigation Menu

Repository navigation

alert() method doesn't work in WebView #30358

40 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

alert() method doesn't work in WebView #30358

Description

Activity

ushang000 commented on Jun 19, 2019

xuyu461989426 commented on Jul 18, 2019

jerryzhoujw commented on Aug 18, 2019

escamoteur commented on Sep 25, 2019

iapicca commented on Jan 14, 2020

simpleblack commented on Jan 15, 2020

deandreamatias commented on Jan 15, 2020

40 remaining items

devnta commented on Jul 19, 2023

stuartmorgan-g commented on Jul 21, 2023

tomonori-sakieda-iplug commented on Sep 8, 2023

github-actions commented on Jan 3, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions