Updated web support

This commit is contained in:
Lorenzo Pichilli 2022-04-25 12:15:53 +02:00
parent 84177f940e
commit d1a4ff1829
5 changed files with 96 additions and 12 deletions

View File

@ -24,7 +24,8 @@ class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
allowsInlineMediaPlayback: true, allowsInlineMediaPlayback: true,
iframeAllow: "camera; microphone", iframeAllow: "camera; microphone",
iframeAllowFullscreen: true, iframeAllowFullscreen: true,
javaScriptCanOpenWindowsAutomatically: false disableVerticalScroll: true,
disableHorizontalScroll: true,
); );
PullToRefreshController? pullToRefreshController; PullToRefreshController? pullToRefreshController;
@ -116,6 +117,8 @@ class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
// URLRequest(url: Uri.parse("https://www.pubnub.com/developers/demos/webrtc/launch/")), // URLRequest(url: Uri.parse("https://www.pubnub.com/developers/demos/webrtc/launch/")),
initialUrlRequest: initialUrlRequest:
URLRequest(url: Uri.parse(Uri.base.toString().replaceFirst("/#/", "/") + 'page.html')), URLRequest(url: Uri.parse(Uri.base.toString().replaceFirst("/#/", "/") + 'page.html')),
// initialUrlRequest:
// URLRequest(url: Uri.parse('https://flutter.dev')),
// initialFile: "assets/index.html", // initialFile: "assets/index.html",
initialUserScripts: UnmodifiableListView<UserScript>([]), initialUserScripts: UnmodifiableListView<UserScript>([]),
initialSettings: settings, initialSettings: settings,
@ -159,11 +162,17 @@ class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
return NavigationActionPolicy.ALLOW; return NavigationActionPolicy.ALLOW;
}, },
onLoadStop: (controller, url) async { onLoadStop: (controller, url) async {
print("onLoadStop");
pullToRefreshController?.endRefreshing(); pullToRefreshController?.endRefreshing();
setState(() { setState(() {
this.url = url.toString(); this.url = url.toString();
urlController.text = this.url; urlController.text = this.url;
}); });
await Future.delayed(Duration(seconds: 2));
await controller.setSettings(settings: settings.copy()
..disableVerticalScroll = false
..disableHorizontalScroll = false
);
}, },
onLoadError: (controller, url, code, message) { onLoadError: (controller, url, code, message) {
pullToRefreshController?.endRefreshing(); pullToRefreshController?.endRefreshing();

View File

@ -19,7 +19,7 @@
<title>flutter_inappwebview_example</title> <title>flutter_inappwebview_example</title>
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">
</head> </head>
<body style="min-height: 3000px;"> <body style="min-height: 3000px;min-width: 3000px;">
<h1>Simple Page 1</h1> <h1>Simple Page 1</h1>
<a href="/page-2.html">Go to page 2</a> <a href="/page-2.html">Go to page 2</a>
<br> <br>

View File

@ -7,7 +7,9 @@ window.flutter_inappwebview = {
isFullscreen: false, isFullscreen: false,
documentTitle: null, documentTitle: null,
functionMap: {}, functionMap: {},
settings: {},
prepare: function (settings) { prepare: function (settings) {
window.flutter_inappwebview.settings = settings;
var iframe = document.getElementById(window.flutter_inappwebview.iframeId); var iframe = document.getElementById(window.flutter_inappwebview.iframeId);
document.addEventListener('fullscreenchange', function(event) { document.addEventListener('fullscreenchange', function(event) {
@ -182,11 +184,33 @@ window.flutter_inappwebview = {
} }
try { try {
if (!settings.javaScriptCanOpenWindowsAutomatically) {
if (!window.flutter_inappwebview.settings.javaScriptCanOpenWindowsAutomatically) {
iframe.contentWindow.open = function () { iframe.contentWindow.open = function () {
throw new Error('JavaScript cannot open windows automatically'); throw new Error('JavaScript cannot open windows automatically');
}; };
} }
if (!window.flutter_inappwebview.settings.verticalScrollBarEnabled && !window.flutter_inappwebview.settings.horizontalScrollBarEnabled) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled";
style.innerHTML = "body::-webkit-scrollbar { width: 0px; height: 0px; }";
iframe.contentDocument.head.append(style);
}
if (window.flutter_inappwebview.settings.disableVerticalScroll) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.disableVerticalScroll";
style.innerHTML = "body { overflow-y: hidden; }";
iframe.contentDocument.head.append(style);
}
if (window.flutter_inappwebview.settings.disableHorizontalScroll) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.disableHorizontalScroll";
style.innerHTML = "body { overflow-x: hidden; }";
iframe.contentDocument.head.append(style);
}
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
@ -195,10 +219,10 @@ window.flutter_inappwebview = {
}); });
} }
}, },
setSettings: function (settings, newSettings) { setSettings: function (newSettings) {
var iframe = window.flutter_inappwebview.iframe; var iframe = window.flutter_inappwebview.iframe;
try { try {
if (settings.javaScriptCanOpenWindowsAutomatically != newSettings.javaScriptCanOpenWindowsAutomatically) { if (window.flutter_inappwebview.settings.javaScriptCanOpenWindowsAutomatically != newSettings.javaScriptCanOpenWindowsAutomatically) {
if (!newSettings.javaScriptCanOpenWindowsAutomatically) { if (!newSettings.javaScriptCanOpenWindowsAutomatically) {
iframe.contentWindow.open = function () { iframe.contentWindow.open = function () {
throw new Error('JavaScript cannot open windows automatically'); throw new Error('JavaScript cannot open windows automatically');
@ -207,9 +231,47 @@ window.flutter_inappwebview = {
iframe.contentWindow.open = window.flutter_inappwebview.functionMap["window.open"]; iframe.contentWindow.open = window.flutter_inappwebview.functionMap["window.open"];
} }
} }
if (window.flutter_inappwebview.settings.verticalScrollBarEnabled != newSettings.verticalScrollBarEnabled &&
window.flutter_inappwebview.settings.horizontalScrollBarEnabled != newSettings.horizontalScrollBarEnabled) {
if (!newSettings.verticalScrollBarEnabled && !newSettings.horizontalScrollBarEnabled) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled";
style.innerHTML = "body::-webkit-scrollbar { width: 0px; height: 0px; }";
iframe.contentDocument.head.append(style);
} else {
var styleElement = iframe.contentDocument.getElementById("settings.verticalScrollBarEnabled-settings.horizontalScrollBarEnabled");
if (styleElement) { styleElement.remove() }
}
}
if (window.flutter_inappwebview.settings.disableVerticalScroll != newSettings.disableVerticalScroll) {
if (newSettings.disableVerticalScroll) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.disableVerticalScroll";
style.innerHTML = "body { overflow-y: hidden; }";
iframe.contentDocument.head.append(style);
} else {
var styleElement = iframe.contentDocument.getElementById("settings.disableVerticalScroll");
if (styleElement) { styleElement.remove() }
}
}
if (window.flutter_inappwebview.settings.disableHorizontalScroll != newSettings.disableHorizontalScroll) {
if (newSettings.disableHorizontalScroll) {
var style = iframe.contentDocument.createElement('style');
style.id = "settings.disableHorizontalScroll";
style.innerHTML = "body { overflow-x: hidden; }";
iframe.contentDocument.head.append(style);
} else {
var styleElement = iframe.contentDocument.getElementById("settings.disableHorizontalScroll");
if (styleElement) { styleElement.remove() }
}
}
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} }
window.flutter_inappwebview.settings = newSettings;
}, },
reload: function () { reload: function () {
var iframe = window.flutter_inappwebview.iframe; var iframe = window.flutter_inappwebview.iframe;

View File

@ -118,17 +118,24 @@ class InAppWebViewSettings
///Define whether the vertical scrollbar should be drawn or not. The default value is `true`. ///Define whether the vertical scrollbar should be drawn or not. The default value is `true`.
/// ///
///**NOTE for Web**: this setting will have effect only if the iframe has the same origin.
///It must have the same value of [horizontalScrollBarEnabled] to take effect.
///
///**Supported Platforms/Implementations**: ///**Supported Platforms/Implementations**:
///- Android native WebView ///- Android native WebView
///- iOS ///- iOS
///- Web
bool verticalScrollBarEnabled; bool verticalScrollBarEnabled;
///Define whether the horizontal scrollbar should be drawn or not. The default value is `true`. ///Define whether the horizontal scrollbar should be drawn or not. The default value is `true`.
/// ///
///**NOTE for Web**: this setting will have effect only if the iframe has the same origin.
///It must have the same value of [verticalScrollBarEnabled] to take effect.
/// ///
///**Supported Platforms/Implementations**: ///**Supported Platforms/Implementations**:
///- Android native WebView ///- Android native WebView
///- iOS ///- iOS
///- Web
bool horizontalScrollBarEnabled; bool horizontalScrollBarEnabled;
///List of custom schemes that the WebView must handle. Use the [WebView.onLoadResourceCustomScheme] event to intercept resource requests with custom scheme. ///List of custom schemes that the WebView must handle. Use the [WebView.onLoadResourceCustomScheme] event to intercept resource requests with custom scheme.
@ -201,16 +208,22 @@ class InAppWebViewSettings
///Set to `true` to disable vertical scroll. The default value is `false`. ///Set to `true` to disable vertical scroll. The default value is `false`.
/// ///
///**Supported Platforms/Implementations**: ///**NOTE for Web**: this setting will have effect only if the iframe has the same origin.
///- Android native WebView
///- iOS
bool disableVerticalScroll;
///Set to `true` to disable horizontal scroll. The default value is `false`.
/// ///
///**Supported Platforms/Implementations**: ///**Supported Platforms/Implementations**:
///- Android native WebView ///- Android native WebView
///- iOS ///- iOS
///- Web
bool disableVerticalScroll;
///Set to `true` to disable horizontal scroll. The default value is `false`.
///
///**NOTE for Web**: this setting will have effect only if the iframe has the same origin.
///
///**Supported Platforms/Implementations**:
///- Android native WebView
///- iOS
///- Web
bool disableHorizontalScroll; bool disableHorizontalScroll;
///Set to `true` to disable context menu. The default value is `false`. ///Set to `true` to disable context menu. The default value is `false`.

View File

@ -243,7 +243,7 @@ class InAppWebViewWebElement {
iframe.setAttribute("sandbox", sandbox.map((e) => e.toValue()).join(" ")); iframe.setAttribute("sandbox", sandbox.map((e) => e.toValue()).join(" "));
} }
bridgeJsObject.callMethod("setSettings", [js.JsObject.jsify(settings.toMap()), js.JsObject.jsify(newSettings.toMap())]); bridgeJsObject.callMethod("setSettings", [js.JsObject.jsify(newSettings.toMap())]);
settings = newSettings; settings = newSettings;
} }