flutter / flutter/flutter

WebView does not intercept browsers back button to pop flutter route

Open
#163,188 3 comments 4 reactions 0 assignees View on GitHub
f: routes found in release: 3.29 found in release: 3.30 has reproducible steps p: webview P2 package platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

https://github.com/user-attachments/assets/08011763-567f-4826-87c3-042a8c878c9d

**Steps to Reproduce:**
1. I created a Flutter Web app using **webviewx_plus** [webviewx_plus](https://pub.dev/packages/webviewx_plus) package.
2. Embeded a Webview inside a Flutter screen.
3. load weppage using html content.

```html
String loadHTML() {
var scriptPart = r'''

''';
return scriptPart;
}
```

4. Click a link inside the Webview to naviagte to another page inside the WebView.
5. Press the browser's back button.

**Expected Behavior :**
If I want to press browser’s default back button (When running on the flutter Web) to pop the entire screen instead of navigating inside the WebView.

Instead of navigating inside the WebView, the entire Flutter screen should pop(go back to the previous Flutter Route)

**Actual Behavior :**

The browser back button navigates inside the WebView instead of popping the Flutter screen.
The user cannot go back to the previous Flutter screen unless they manually close the tab or navigate using Flutter UI Buttons.
```
class WebviewXPlusWrapper extends StatefulWidget {
const WebviewXPlusWrapper({super.key,});

@override
State createState() => _WebviewXPlusWrapperState();
}

class _WebviewXPlusWrapperState extends State {
late WebViewXController webviewController;
final scrollController = ScrollController();

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

@override
Widget build(BuildContext context) {
return _buildWebViewX();
}

String loadHTML() {
var content = r'''

''';
return content;
}

Widget _buildWebViewX() {
String content = loadHTML();
return
PopScope(
canPop: false,
onPopInvokedWithResult: (didPop, result) {
if(didPop) {
_goBack(context, webviewController);
}
},
child:
Scaffold(
body: Center(
child: WebViewX(
key: const ValueKey('webviewx'),
initialContent: content,
initialSourceType: SourceType.html,
width: MediaQuery.of(context).size.width * 0.8,
height: 600,
onWebViewCreated: (controller) => {webviewController = controller},
onPageStarted: (src) => {},
onPageFinished: (src) => {},
jsContent: const {
EmbeddedJsContent(
webJs: "function notifyInitMethod(msg) { InitDartCallback( msg) }",
mobileJs:
"function notifyInitMethod(msg) { InitDartCallback.postMessage('Mobile callback says: ' + msg) }",
),
EmbeddedJsContent(
webJs: "function submitNonceMethod(msg) { SubmitDartCallback( msg) }",
mobileJs:
"function submitNonceMethod(msg) { SubmitDartCallback.postMessage('Mobile callback says: ' + msg) }",
),
},
dartCallBacks: {
DartCallback(
name: 'SubmitDartCallback',
callBack: (msg) {

},
),
DartCallback(
name: 'InitDartCallback',
callBack: (msg) {

},
)
},
webSpecificParams: const WebSpecificParams(
printDebugInfo: false,
),
mobileSpecificParams: const MobileSpecificParams(
androidEnableHybridComposition: true,
),
navigationDelegate: (navigation) {
return NavigationDecision.navigate;
},
)
)));
}

Future _goBack(BuildContext context, WebViewXController controller) async {
if (await controller.canGoBack()) {
controller.goBack();
return Future.value(false);
} else {
return Future.value(false);
context.pop();
}
}

```
i tried all possible ways but it is not working.

` html.window.onPopState.listen((event) {
});`

and

`ui.platformViewRegistry.registerViewFactory(
'html-iframe',
(int viewId) {
final iframe = html.IFrameElement()
..src = 'https://www.example.com'
..style.border = 'none'
..style.height = '600px'
..style.width = '100%'
..id = 'iframe-element';
iframe.onLoad.listen((event) {
_updateHistory(iframe.src ?? '');
});
return iframe;
},
);`

Please suggest me, if anyone have solution.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.