WebView does not intercept browsers back button to pop flutter route
- 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
Assessment
This issue has not been assessed yet.