rogalikkkkkk
/
iosWebViewFix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated DropDown workaround: load it as soon as possible and load also for iframes where possibile (same origin)

This commit is contained in:
Lorenzo Pichilli 2019-12-12 16:28:05 +01:00
parent 9b85ae9c01
commit c05e0e3963
6 changed files with 491 additions and 486 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.idea/misc.xml
View File

@ -35,7 +35,7 @@
</value>
</option>
</component>
<component name="ProjectRootManager" version="2" project-jdk-name="Android API 24 Platform" project-jdk-type="Android SDK" />
<component name="ProjectRootManager" version="2" project-jdk-name="Android API 28 Platform" project-jdk-type="Android SDK" />
<component name="ProjectType">
<option name="id" value="io.flutter" />
</component>

131
.idea/workspace.xml
View File

@ -16,9 +16,13 @@
<component name="ChangeListManager">
<list default="true" id="9b41f7a2-a71e-4923-91fb-249d7815b3e7" name="Default" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java" beforeDir="false" afterPath="$PROJECT_DIR$/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java" beforeDir="false" afterPath="$PROJECT_DIR$/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java" afterDir="false" />
<change beforePath="$PROJECT_DIR$/example/ios/.symlinks/plugins/flutter_inappwebview/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/example/ios/.symlinks/plugins/flutter_inappwebview/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/example/ios/.symlinks/plugins/flutter_inappwebview/example/lib/main.dart" beforeDir="false" afterPath="$PROJECT_DIR$/example/ios/.symlinks/plugins/flutter_inappwebview/example/lib/main.dart" afterDir="false" />
<change beforePath="$PROJECT_DIR$/example/lib/main.dart" beforeDir="false" afterPath="$PROJECT_DIR$/example/lib/main.dart" afterDir="false" />
<change beforePath="$PROJECT_DIR$/lib/src/webview_options.dart" beforeDir="false" afterPath="$PROJECT_DIR$/lib/src/webview_options.dart" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.dart_tool/" />
<ignored path="$PROJECT_DIR$/.idea/" />
@ -35,14 +39,14 @@
<component name="DefaultGradleProjectSettings">
<option name="isMigrated" value="true" />
</component>
<component name="ExecutionTargetManager" SELECTED_TARGET="Pixel_3_XL_API_24" />
<component name="ExecutionTargetManager" SELECTED_TARGET="LGH870776aa626" />
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/example/lib/main.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="481">
<caret line="78" column="1" selection-start-line="78" selection-start-column="1" selection-end-line="78" selection-end-column="1" />
<state relative-caret-position="224">
<caret line="64" column="27" lean-forward="true" selection-start-line="64" selection-start-column="27" selection-end-line="64" selection-end-column="27" />
<folding>
<element signature="e#0#20#0" expanded="true" />
</folding>
@ -65,8 +69,8 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/lib/src/webview_options.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="373">
<caret line="81" column="46" selection-start-line="81" selection-start-column="46" selection-end-line="81" selection-end-column="46" />
<state relative-caret-position="328">
<caret line="412" column="102" lean-forward="true" selection-start-line="412" selection-start-column="5" selection-end-line="412" selection-end-column="102" />
<folding>
<element signature="e#0#17#0" expanded="true" />
</folding>
@ -98,7 +102,7 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/lib/src/in_app_browser.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="4575">
<state relative-caret-position="535">
<caret line="315" column="50" selection-start-line="315" selection-start-column="50" selection-end-line="315" selection-end-column="50" />
<folding>
<element signature="e#0#20#0" expanded="true" />
@ -110,8 +114,13 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="6180">
<caret line="412" column="3" selection-start-line="412" selection-start-column="3" selection-end-line="412" selection-end-column="21" />
<state relative-caret-position="48">
<caret line="412" column="372" selection-start-line="412" selection-start-column="372" selection-end-line="412" selection-end-column="372" />
<folding>
<element signature="e#0#20#0" expanded="true" />
<element signature="e#0#39#0" expanded="true" />
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
@ -137,7 +146,6 @@
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>_staticChannel</find>
<find>defa</find>
<find>InAppWebViewStatic</find>
<find>removeFromSuperview</find>
@ -167,6 +175,7 @@
<find>\n</find>
<find>dropDownWorkaroundEnabled</find>
<find>debuggingEnabled</find>
<find>\n&quot; +</find>
</findStrings>
<replaceStrings>
<replace>activity.getPreferences(0)</replace>
@ -176,6 +185,7 @@
<replace>Event fired</replace>
<replace>flutterInAppWebViewPlatformReady</replace>
<replace>flutter_inappwebview</replace>
<replace>&quot; +</replace>
</replaceStrings>
<dirStrings>
<dir>$PROJECT_DIR$/example/android</dir>
@ -254,39 +264,6 @@
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
<item name="lib" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
<item name="lib" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="Scope">
<subPane subId="Project Files">
<expand>
<path>
<item name="Root" type="cbb8eebc:String" user="Root" />
<item name="flutter_inappbrowser" type="cbb8eebc:String" user="flutter_inappbrowser" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="PackagesPane" />
<pane id="AndroidView">
<subPane>
@ -317,6 +294,39 @@
<select />
</subPane>
</pane>
<pane id="Scope">
<subPane subId="Project Files">
<expand>
<path>
<item name="Root" type="cbb8eebc:String" user="Root" />
<item name="flutter_inappbrowser" type="cbb8eebc:String" user="flutter_inappbrowser" />
</path>
</expand>
<select />
</subPane>
</pane>
<pane id="ProjectPane">
<subPane>
<expand>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
<item name="lib" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="flutter_inappwebview" type="b2602c69:ProjectViewProjectNode" />
<item name="flutter_inappwebview" type="462c0819:PsiDirectoryNode" />
<item name="lib" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
@ -466,7 +476,7 @@
</todo-panel>
</component>
<component name="ToolWindowManager">
<frame x="0" y="23" width="1920" height="1057" extended-state="6" />
<frame x="0" y="23" width="1920" height="1057" extended-state="0" />
<editor active="true" />
<layout>
<window_info content_ui="combo" id="Project" order="0" sideWeight="0.6177474" visible="true" weight="0.1368477" />
@ -480,7 +490,7 @@
<window_info id="Resources Explorer" order="8" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" weight="0.32745314" />
<window_info active="true" anchor="bottom" id="Run" order="2" sideWeight="0.49478307" visible="true" weight="0.44455957" />
<window_info active="true" anchor="bottom" id="Run" order="2" sideWeight="0.49478307" visible="true" weight="0.38445595" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.34196892" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
@ -855,9 +865,16 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/CHANGELOG.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="180">
<caret line="12" column="34" selection-start-line="12" selection-start-column="34" selection-end-line="12" selection-end-column="34" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/lib/src/in_app_browser.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="4575">
<state relative-caret-position="535">
<caret line="315" column="50" selection-start-line="315" selection-start-column="50" selection-end-line="315" selection-end-column="50" />
<folding>
<element signature="e#0#20#0" expanded="true" />
@ -867,22 +884,20 @@
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="6180">
<caret line="412" column="3" selection-start-line="412" selection-start-column="3" selection-end-line="412" selection-end-column="21" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/CHANGELOG.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="180">
<caret line="12" column="34" selection-start-line="12" selection-start-column="34" selection-end-line="12" selection-end-column="34" />
<state relative-caret-position="48">
<caret line="412" column="372" selection-start-line="412" selection-start-column="372" selection-end-line="412" selection-end-column="372" />
<folding>
<element signature="e#0#20#0" expanded="true" />
<element signature="e#0#39#0" expanded="true" />
<element signature="e#0#39#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/lib/src/webview_options.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="373">
<caret line="81" column="46" selection-start-line="81" selection-start-column="46" selection-end-line="81" selection-end-column="46" />
<state relative-caret-position="328">
<caret line="412" column="102" lean-forward="true" selection-start-line="412" selection-start-column="5" selection-end-line="412" selection-end-column="102" />
<folding>
<element signature="e#0#17#0" expanded="true" />
</folding>
@ -891,8 +906,8 @@
</entry>
<entry file="file://$PROJECT_DIR$/example/lib/main.dart">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="481">
<caret line="78" column="1" selection-start-line="78" selection-start-column="1" selection-end-line="78" selection-end-column="1" />
<state relative-caret-position="224">
<caret line="64" column="27" lean-forward="true" selection-start-line="64" selection-start-column="27" selection-end-line="64" selection-end-column="27" />
<folding>
<element signature="e#0#20#0" expanded="true" />
</folding>

2
README.md
View File

@ -410,7 +410,7 @@ Instead, on the `onLoadStop` WebView event, you can use `callHandler` directly:
* `hardwareAcceleration`: Boolean value to enable Hardware Acceleration in the WebView.
* `supportMultipleWindows`: Sets whether the WebView whether supports multiple windows.
* `regexToCancelSubFramesLoading`: Regular expression used by `shouldOverrideUrlLoading` event to cancel navigation for frames that are not the main frame. If the url request of a subframe matches the regular expression, then the request of that subframe is canceled.
* `dropDownWorkaroundEnabled`: Enable a temporary workaround for html dropdowns (`<select>` tags) (available on Android 19+). It requires **JavaScript enabled**. It attempts to block click events for the dropdowns creating a custom `<div>` layer over the dropdown to intercept user's clicks. The default value is `false`.
* `dropDownWorkaroundEnabled`: Enable a temporary workaround for html dropdowns (`<select>` tags) (available on Android 19+). It requires **JavaScript enabled**. It attempts to block click events for the dropdowns creating a custom `<div>` layer over the dropdown to intercept user's clicks. This workaround is applied as soon as the web page fires the `DOMContentLoaded` JavaScript event. The default value is `false`.
##### `InAppWebView` iOS-specific options

834
android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java
View File

@ -515,455 +515,445 @@ final public class InAppWebView extends InputAwareWebView {
"})(window.fetch);";
// Android API 19+
// ResizeSensor: https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
static final String dropDownWorkaroundJS = "(function() {" +
" var uuid = 0;" +
" function prepare() {" +
" if (typeof window === \"undefined\") {" +
" return null;" +
" }" +
" var globalWindow =" +
" typeof window != \"undefined\" && window.Math == Math" +
" ? window" +
" : typeof self != \"undefined\" && self.Math == Math" +
" ? self" +
" : Function(\"return this\")();" +
" var requestAnimationFrame =" +
" globalWindow.requestAnimationFrame ||" +
" globalWindow.mozRequestAnimationFrame ||" +
" globalWindow.webkitRequestAnimationFrame ||" +
" function(fn) {" +
" return globalWindow.setTimeout(fn, 20);" +
" };" +
" function forEachElement(elements, callback) {" +
" var elementsType = Object.prototype.toString.call(elements);" +
" var isCollectionTyped =" +
" \"[object Array]\" === elementsType ||" +
" \"[object NodeList]\" === elementsType ||" +
" \"[object HTMLCollection]\" === elementsType ||" +
" \"[object Object]\" === elementsType ||" +
" (\"undefined\" !== typeof jQuery && elements instanceof jQuery) ||" +
" (\"undefined\" !== typeof Elements && elements instanceof Elements);" +
" var i = 0," +
" j = elements.length;" +
" if (isCollectionTyped) {" +
" for (; i < j; i++) {" +
" callback(elements[i]);" +
" function dropDownWorkaround(window, document) {" +
" var uuid = 0;" +
" function prepare() {" +
" if (typeof window === 'undefined') {" +
" return null;" +
" }" +
" var globalWindow =" +
" typeof window != 'undefined' && window.Math == Math" +
" ? window" +
" : typeof self != 'undefined' && self.Math == Math" +
" ? self" +
" : Function('return this')();" +
" var requestAnimationFrame =" +
" globalWindow.requestAnimationFrame ||" +
" globalWindow.mozRequestAnimationFrame ||" +
" globalWindow.webkitRequestAnimationFrame ||" +
" function(fn) {" +
" return globalWindow.setTimeout(fn, 20);" +
" };" +
" function forEachElement(elements, callback) {" +
" var elementsType = Object.prototype.toString.call(elements);" +
" var isCollectionTyped =" +
" '[object Array]' === elementsType ||" +
" '[object NodeList]' === elementsType ||" +
" '[object HTMLCollection]' === elementsType ||" +
" '[object Object]' === elementsType ||" +
" ('undefined' !== typeof jQuery && elements instanceof jQuery) ||" +
" ('undefined' !== typeof Elements && elements instanceof Elements);" +
" var i = 0," +
" j = elements.length;" +
" if (isCollectionTyped) {" +
" for (; i < j; i++) {" +
" callback(elements[i]);" +
" }" +
" } else {" +
" callback(elements);" +
" }" +
" } else {" +
" callback(elements);" +
" }" +
" }" +
" function getElementSize(element) {" +
" if (!element.getBoundingClientRect) {" +
" function getElementSize(element) {" +
" if (!element.getBoundingClientRect) {" +
" return {" +
" width: element.offsetWidth," +
" height: element.offsetHeight" +
" };" +
" }" +
" var rect = element.getBoundingClientRect();" +
" return {" +
" width: element.offsetWidth," +
" height: element.offsetHeight" +
" width: Math.round(rect.width)," +
" height: Math.round(rect.height)" +
" };" +
" }" +
"" +
" var rect = element.getBoundingClientRect();" +
" return {" +
" width: Math.round(rect.width)," +
" height: Math.round(rect.height)" +
" };" +
" }" +
" function setStyle(element, style) {" +
" Object.keys(style).forEach(function(key) {" +
" element.style[key] = style[key];" +
" });" +
" }" +
" var ResizeSensor = function(element, callback) {" +
" var lastAnimationFrame = 0;" +
" function EventQueue() {" +
" var q = [];" +
" this.add = function(ev) {" +
" q.push(ev);" +
" };" +
"" +
" var i, j;" +
" this.call = function(sizeInfo) {" +
" for (i = 0, j = q.length; i < j; i++) {" +
" q[i].call(this, sizeInfo);" +
" }" +
" };" +
"" +
" this.remove = function(ev) {" +
" var newQueue = [];" +
" for (i = 0, j = q.length; i < j; i++) {" +
" if (q[i] !== ev) newQueue.push(q[i]);" +
" }" +
" q = newQueue;" +
" };" +
"" +
" this.length = function() {" +
" return q.length;" +
" };" +
" function setStyle(element, style) {" +
" Object.keys(style).forEach(function(key) {" +
" element.style[key] = style[key];" +
" });" +
" }" +
" function attachResizeEvent(element, resized) {" +
" if (!element) return;" +
" if (element.resizedAttached) {" +
" var ResizeSensor = function(element, callback) {" +
" var lastAnimationFrame = 0;" +
" function EventQueue() {" +
" var q = [];" +
" this.add = function(ev) {" +
" q.push(ev);" +
" };" +
" var i, j;" +
" this.call = function(sizeInfo) {" +
" for (i = 0, j = q.length; i < j; i++) {" +
" q[i].call(this, sizeInfo);" +
" }" +
" };" +
" this.remove = function(ev) {" +
" var newQueue = [];" +
" for (i = 0, j = q.length; i < j; i++) {" +
" if (q[i] !== ev) newQueue.push(q[i]);" +
" }" +
" q = newQueue;" +
" };" +
" this.length = function() {" +
" return q.length;" +
" };" +
" }" +
" function attachResizeEvent(element, resized) {" +
" if (!element) return;" +
" if (element.resizedAttached) {" +
" element.resizedAttached.add(resized);" +
" return;" +
" }" +
" element.resizedAttached = new EventQueue();" +
" element.resizedAttached.add(resized);" +
" element.resizeSensor = document.createElement('div');" +
" element.resizeSensor.dir = 'ltr';" +
" element.resizeSensor.className = 'resize-sensor';" +
" var style = {" +
" pointerEvents: 'none'," +
" position: 'absolute'," +
" left: '0px'," +
" top: '0px'," +
" right: '0px'," +
" bottom: '0px'," +
" overflow: 'hidden'," +
" zIndex: '-1'," +
" visibility: 'hidden'," +
" maxWidth: '100%'" +
" };" +
" var styleChild = {" +
" position: 'absolute'," +
" left: '0px'," +
" top: '0px'," +
" transition: '0s'" +
" };" +
" setStyle(element.resizeSensor, style);" +
" var expand = document.createElement('div');" +
" expand.className = 'resize-sensor-expand';" +
" setStyle(expand, style);" +
" var expandChild = document.createElement('div');" +
" setStyle(expandChild, styleChild);" +
" expand.appendChild(expandChild);" +
" var shrink = document.createElement('div');" +
" shrink.className = 'resize-sensor-shrink';" +
" setStyle(shrink, style);" +
" var shrinkChild = document.createElement('div');" +
" setStyle(shrinkChild, styleChild);" +
" setStyle(shrinkChild, { width: '200%', height: '200%' });" +
" shrink.appendChild(shrinkChild);" +
" element.resizeSensor.appendChild(expand);" +
" element.resizeSensor.appendChild(shrink);" +
" element.appendChild(element.resizeSensor);" +
" var computedStyle = window.getComputedStyle(element);" +
" var position = computedStyle" +
" ? computedStyle.getPropertyValue('position')" +
" : null;" +
" if (" +
" 'absolute' !== position &&" +
" 'relative' !== position &&" +
" 'fixed' !== position &&" +
" 'sticky' !== position" +
" ) {" +
" element.style.position = 'relative';" +
" }" +
" var dirty, rafId;" +
" var size = getElementSize(element);" +
" var lastWidth = 0;" +
" var lastHeight = 0;" +
" var initialHiddenCheck = true;" +
" lastAnimationFrame = 0;" +
" var resetExpandShrink = function() {" +
" var width = element.offsetWidth;" +
" var height = element.offsetHeight;" +
" expandChild.style.width = width + 10 + 'px';" +
" expandChild.style.height = height + 10 + 'px';" +
" expand.scrollLeft = width + 10;" +
" expand.scrollTop = height + 10;" +
" shrink.scrollLeft = width + 10;" +
" shrink.scrollTop = height + 10;" +
" };" +
" var reset = function() {" +
" if (initialHiddenCheck) {" +
" var invisible =" +
" element.offsetWidth === 0 && element.offsetHeight === 0;" +
" if (invisible) {" +
" if (!lastAnimationFrame) {" +
" lastAnimationFrame = requestAnimationFrame(function() {" +
" lastAnimationFrame = 0;" +
" reset();" +
" });" +
" }" +
" return;" +
" } else {" +
" initialHiddenCheck = false;" +
" }" +
" }" +
" resetExpandShrink();" +
" };" +
" element.resizeSensor.resetSensor = reset;" +
" var onResized = function() {" +
" rafId = 0;" +
" if (!dirty) return;" +
" lastWidth = size.width;" +
" lastHeight = size.height;" +
" if (element.resizedAttached) {" +
" element.resizedAttached.call(size);" +
" }" +
" };" +
" var onScroll = function() {" +
" size = getElementSize(element);" +
" dirty = size.width !== lastWidth || size.height !== lastHeight;" +
" if (dirty && !rafId) {" +
" rafId = requestAnimationFrame(onResized);" +
" }" +
" reset();" +
" };" +
" var addEvent = function(el, name, cb) {" +
" if (el.attachEvent) {" +
" el.attachEvent('on' + name, cb);" +
" } else {" +
" el.addEventListener(name, cb);" +
" }" +
" };" +
" addEvent(expand, 'scroll', onScroll);" +
" addEvent(shrink, 'scroll', onScroll);" +
" lastAnimationFrame = requestAnimationFrame(reset);" +
" }" +
" forEachElement(element, function(elem) {" +
" attachResizeEvent(elem, callback);" +
" });" +
" this.detach = function(ev) {" +
" if (!lastAnimationFrame) {" +
" window.cancelAnimationFrame(lastAnimationFrame);" +
" lastAnimationFrame = 0;" +
" }" +
" ResizeSensor.detach(element, ev);" +
" };" +
" this.reset = function() {" +
" element.resizeSensor.resetSensor();" +
" };" +
" };" +
" ResizeSensor.reset = function(element) {" +
" forEachElement(element, function(elem) {" +
" elem.resizeSensor.resetSensor();" +
" });" +
" };" +
" ResizeSensor.detach = function(element, ev) {" +
" forEachElement(element, function(elem) {" +
" if (!elem) return;" +
" if (elem.resizedAttached && typeof ev === 'function') {" +
" elem.resizedAttached.remove(ev);" +
" if (elem.resizedAttached.length()) return;" +
" }" +
" if (elem.resizeSensor) {" +
" if (elem.contains(elem.resizeSensor)) {" +
" elem.removeChild(elem.resizeSensor);" +
" }" +
" delete elem.resizeSensor;" +
" delete elem.resizedAttached;" +
" }" +
" });" +
" };" +
" if (typeof MutationObserver !== 'undefined') {" +
" var observer = new MutationObserver(function(mutations) {" +
" for (var i in mutations) {" +
" if (mutations.hasOwnProperty(i)) {" +
" var items = mutations[i].addedNodes;" +
" for (var j = 0; j < items.length; j++) {" +
" if (items[j].resizeSensor) {" +
" ResizeSensor.reset(items[j]);" +
" }" +
" }" +
" }" +
" }" +
" });" +
" document.addEventListener('DOMContentLoaded', function(event) {" +
" observer.observe(document.body, {" +
" childList: true," +
" subtree: true" +
" });" +
" });" +
" }" +
" return ResizeSensor;" +
" }" +
" var ResizeSensor = prepare();" +
" function pseudoStyle(htmlElement, pseudoElement, styles) {" +
" var _sheetId = 'pseudoStyles';" +
" var _head = document.head || document.getElementsByTagName('head')[0];" +
" var _sheet =" +
" document.getElementById(_sheetId) || document.createElement('style');" +
" _sheet.id = _sheetId;" +
" var styleClass = htmlElement.className.split(' ').join('.');" +
" if (styleClass.charAt(0) != '.') {" +
" styleClass = '.' + styleClass;" +
" }" +
" _sheet.innerHTML += '\\n' + styleClass + ':' + pseudoElement + '{';" +
" for (var key in styles) {" +
" _sheet.innerHTML += key + ':' + styles[key] + ';\\n';" +
" }" +
" _sheet.innerHTML += '}';" +
" _head.appendChild(_sheet);" +
" }" +
" function getIndexSelectValues(select) {" +
" var result = [];" +
" var options = select && select.options;" +
" for (var i = 0, iLen = options.length; i < iLen; i++) {" +
" var opt = options[i];" +
" if (opt.selected) {" +
" result.push(i);" +
" }" +
" }" +
" return result;" +
" }" +
" function setMultipleValues(select, values) {" +
" var options = select && select.options;" +
" for (var i = 0, iLen = options.length; i < iLen; i++) {" +
" var opt = options[i];" +
" opt.selected = values.indexOf(opt.value) >= 0;" +
" }" +
" }" +
" function addSpanWrapper(selectElement) {" +
" var spanElement = document.createElement('span');" +
" spanElement.flutterInAppWebViewSelect = selectElement;" +
" new ResizeSensor(spanElement, function() {" +
" var style =" +
" selectElement.currentStyle || window.getComputedStyle(selectElement);" +
" var xMargin =" +
" parseFloat(style.marginLeft) + parseFloat(style.marginRight);" +
" var yMargin =" +
" parseFloat(style.marginTop) + parseFloat(style.marginBottom);" +
" selectElement.style.width =" +
" spanElement.getBoundingClientRect().width - xMargin + 'px';" +
" selectElement.style.height =" +
" spanElement.getBoundingClientRect().height - yMargin + 'px';" +
" });" +
" spanElement.className = 'flutterInAppWebViewSelect-' + uuid;" +
" spanElement.style.padding = '0px';" +
" spanElement.style.margin = '0px';" +
" spanElement.style.border = '0px';" +
" spanElement.style.display = 'inline-block';" +
" spanElement.style.backgroundColor = 'transparent';" +
" spanElement.style.position = 'relative';" +
" pseudoStyle(spanElement, 'before', {" +
" content: '\\' \\''," +
" width: '100%'," +
" height: '100%'," +
" position: 'absolute'," +
" top: '0'," +
" left: '0'," +
" 'z-index': 99999999" +
" });" +
" selectElement.flutterInAppWebViewSpanWrapper = spanElement;" +
" var clickEventListener = function(event) {" +
" var self = this;" +
" event.preventDefault();" +
" var isDisabled = !!this.flutterInAppWebViewSelect.disabled;" +
" if (isDisabled) {" +
" return;" +
" }" +
"" +
" element.resizedAttached = new EventQueue();" +
" element.resizedAttached.add(resized);" +
"" +
" element.resizeSensor = document.createElement(\"div\");" +
" element.resizeSensor.dir = \"ltr\";" +
" element.resizeSensor.className = \"resize-sensor\";" +
"" +
" var style = {" +
" pointerEvents: \"none\"," +
" position: \"absolute\"," +
" left: \"0px\"," +
" top: \"0px\"," +
" right: \"0px\"," +
" bottom: \"0px\"," +
" overflow: \"hidden\"," +
" zIndex: \"-1\"," +
" visibility: \"hidden\"," +
" maxWidth: \"100%\"" +
" };" +
" var styleChild = {" +
" position: \"absolute\"," +
" left: \"0px\"," +
" top: \"0px\"," +
" transition: \"0s\"" +
" };" +
"" +
" setStyle(element.resizeSensor, style);" +
"" +
" var expand = document.createElement(\"div\");" +
" expand.className = \"resize-sensor-expand\";" +
" setStyle(expand, style);" +
"" +
" var expandChild = document.createElement(\"div\");" +
" setStyle(expandChild, styleChild);" +
" expand.appendChild(expandChild);" +
"" +
" var shrink = document.createElement(\"div\");" +
" shrink.className = \"resize-sensor-shrink\";" +
" setStyle(shrink, style);" +
"" +
" var shrinkChild = document.createElement(\"div\");" +
" setStyle(shrinkChild, styleChild);" +
" setStyle(shrinkChild, { width: \"200%\", height: \"200%\" });" +
" shrink.appendChild(shrinkChild);" +
"" +
" element.resizeSensor.appendChild(expand);" +
" element.resizeSensor.appendChild(shrink);" +
" element.appendChild(element.resizeSensor);" +
"" +
" var computedStyle = window.getComputedStyle(element);" +
" var position = computedStyle" +
" ? computedStyle.getPropertyValue(\"position\")" +
" : null;" +
" if (" +
" \"absolute\" !== position &&" +
" \"relative\" !== position &&" +
" \"fixed\" !== position &&" +
" \"sticky\" !== position" +
" ) {" +
" element.style.position = \"relative\";" +
" this.flutterInAppWebViewSelect.focus();" +
" var options = [];" +
" var optionElements = this.flutterInAppWebViewSelect.querySelectorAll(" +
" 'option'" +
" );" +
" for (var i = 0; i < optionElements.length; i++) {" +
" var optionElement = optionElements[i];" +
" options.push({" +
" key: optionElement.textContent," +
" value: optionElement.value" +
" });" +
" }" +
"" +
" var dirty, rafId;" +
" var size = getElementSize(element);" +
" var lastWidth = 0;" +
" var lastHeight = 0;" +
" var initialHiddenCheck = true;" +
" lastAnimationFrame = 0;" +
"" +
" var resetExpandShrink = function() {" +
" var width = element.offsetWidth;" +
" var height = element.offsetHeight;" +
"" +
" expandChild.style.width = width + 10 + \"px\";" +
" expandChild.style.height = height + 10 + \"px\";" +
"" +
" expand.scrollLeft = width + 10;" +
" expand.scrollTop = height + 10;" +
"" +
" shrink.scrollLeft = width + 10;" +
" shrink.scrollTop = height + 10;" +
" };" +
"" +
" var reset = function() {" +
" if (initialHiddenCheck) {" +
" var invisible =" +
" element.offsetWidth === 0 && element.offsetHeight === 0;" +
" if (invisible) {" +
" if (!lastAnimationFrame) {" +
" lastAnimationFrame = requestAnimationFrame(function() {" +
" lastAnimationFrame = 0;" +
"" +
" reset();" +
" });" +
" var isMultiple = !!this.flutterInAppWebViewSelect.multiple;" +
" window.flutter_inappwebview" +
" .callHandler(" +
" 'flutterInAppWebViewDropDownWorkaround'," +
" getIndexSelectValues(this.flutterInAppWebViewSelect)," +
" isMultiple," +
" options" +
" )" +
" .then(function(result) {" +
" if (result != null && result.values != null) {" +
" if (!isMultiple) {" +
" if (result.values.length > 0) {" +
" self.flutterInAppWebViewSelect.value = result.values[0];" +
" }" +
" } else {" +
" setMultipleValues(" +
" self.flutterInAppWebViewSelect," +
" result.values" +
" );" +
" }" +
"" +
" return;" +
" } else {" +
" initialHiddenCheck = false;" +
" }" +
" }" +
"" +
" resetExpandShrink();" +
" };" +
" element.resizeSensor.resetSensor = reset;" +
"" +
" var onResized = function() {" +
" rafId = 0;" +
"" +
" if (!dirty) return;" +
"" +
" lastWidth = size.width;" +
" lastHeight = size.height;" +
"" +
" if (element.resizedAttached) {" +
" element.resizedAttached.call(size);" +
" }" +
" };" +
"" +
" var onScroll = function() {" +
" size = getElementSize(element);" +
" dirty = size.width !== lastWidth || size.height !== lastHeight;" +
"" +
" if (dirty && !rafId) {" +
" rafId = requestAnimationFrame(onResized);" +
" }" +
"" +
" reset();" +
" };" +
"" +
" var addEvent = function(el, name, cb) {" +
" if (el.attachEvent) {" +
" el.attachEvent(\"on\" + name, cb);" +
" } else {" +
" el.addEventListener(name, cb);" +
" }" +
" };" +
"" +
" addEvent(expand, \"scroll\", onScroll);" +
" addEvent(shrink, \"scroll\", onScroll);" +
"" +
" lastAnimationFrame = requestAnimationFrame(reset);" +
" }" +
"" +
" forEachElement(element, function(elem) {" +
" attachResizeEvent(elem, callback);" +
" });" +
"" +
" this.detach = function(ev) {" +
" if (!lastAnimationFrame) {" +
" window.cancelAnimationFrame(lastAnimationFrame);" +
" lastAnimationFrame = 0;" +
" }" +
" ResizeSensor.detach(element, ev);" +
" var evt = document.createEvent('HTMLEvents');" +
" evt.initEvent('change', false, true);" +
" self.flutterInAppWebViewSelect.dispatchEvent(evt);" +
" self.flutterInAppWebViewSelect.blur();" +
" });" +
" };" +
"" +
" this.reset = function() {" +
" element.resizeSensor.resetSensor();" +
" };" +
" };" +
"" +
" ResizeSensor.reset = function(element) {" +
" forEachElement(element, function(elem) {" +
" elem.resizeSensor.resetSensor();" +
" spanElement.addEventListener('click', clickEventListener);" +
" divWithEventListeners.push({" +
" spanElement: spanElement," +
" clickEvent: clickEventListener" +
" });" +
" };" +
"" +
" ResizeSensor.detach = function(element, ev) {" +
" forEachElement(element, function(elem) {" +
" if (!elem) return;" +
" if (elem.resizedAttached && typeof ev === \"function\") {" +
" elem.resizedAttached.remove(ev);" +
" if (elem.resizedAttached.length()) return;" +
" }" +
" if (elem.resizeSensor) {" +
" if (elem.contains(elem.resizeSensor)) {" +
" elem.removeChild(elem.resizeSensor);" +
" selectElement.parentNode.insertBefore(spanElement, selectElement);" +
" spanElement.appendChild(selectElement);" +
" uuid++;" +
" }" +
" function removeSpanWrapper(selectElement) {" +
" if (selectElement.flutterInAppWebViewSpanWrapper) {" +
" divWithEventListeners.splice(" +
" divWithEventListeners.indexOf(" +
" selectElement.flutterInAppWebViewSpanWrapper" +
" )," +
" 1" +
" );" +
" document.body.removeChild(selectElement.flutterInAppWebViewSpanWrapper);" +
" }" +
" }" +
" var selectElements = document.querySelectorAll('select');" +
" var divWithEventListeners = [];" +
" for (var selectElement of selectElements) {" +
" addSpanWrapper(selectElement);" +
" }" +
" var mutationObserver = new MutationObserver(function(mutations) {" +
" mutations.forEach(function(mutation) {" +
" for (var nodeElement of mutation.addedNodes) {" +
" if (nodeElement.tagName == 'SELECT') {" +
" addSpanWrapper(nodeElement);" +
" }" +
" delete elem.resizeSensor;" +
" delete elem.resizedAttached;" +
" }" +
" });" +
" };" +
"" +
" if (typeof MutationObserver !== \"undefined\") {" +
" var observer = new MutationObserver(function(mutations) {" +
" for (var i in mutations) {" +
" if (mutations.hasOwnProperty(i)) {" +
" var items = mutations[i].addedNodes;" +
" for (var j = 0; j < items.length; j++) {" +
" if (items[j].resizeSensor) {" +
" ResizeSensor.reset(items[j]);" +
" }" +
" for (var nodeElement of mutation.removedNodes) {" +
" if (nodeElement.tagName == 'SELECT') {" +
" removeSpanWrapper(nodeElement);" +
" if (nodeElement.mutationObserver) {" +
" nodeElement.mutationObserver.disconnect();" +
" }" +
" }" +
" }" +
" });" +
"" +
" document.addEventListener(\"DOMContentLoaded\", function(event) {" +
" observer.observe(document.body, {" +
" childList: true," +
" subtree: true" +
" });" +
" });" +
" }" +
"" +
" return ResizeSensor;" +
" }" +
" var ResizeSensor = prepare();" +
" function pseudoStyle(htmlElement, pseudoElement, styles) {" +
" var _sheetId = \"pseudoStyles\";" +
" var _head = document.head || document.getElementsByTagName(\"head\")[0];" +
" var _sheet =" +
" document.getElementById(_sheetId) || document.createElement(\"style\");" +
" _sheet.id = _sheetId;" +
" var styleClass = htmlElement.className.split(\" \").join(\".\");" +
" if (styleClass.charAt(0) != \".\") {" +
" styleClass = \".\" + styleClass;" +
" }" +
" _sheet.innerHTML += \"\n\" + styleClass + \":\" + pseudoElement + \"{\";" +
" for (var key in styles) {" +
" _sheet.innerHTML += key + \":\" + styles[key] + \";\n\";" +
" }" +
" _sheet.innerHTML += \"}\";" +
" _head.appendChild(_sheet);" +
" }" +
" function getIndexSelectValues(select) {" +
" var result = [];" +
" var options = select && select.options;" +
" for (var i = 0, iLen = options.length; i < iLen; i++) {" +
" var opt = options[i];" +
" if (opt.selected) {" +
" result.push(i);" +
" }" +
" }" +
" return result;" +
" }" +
" function setMultipleValues(select, values) {" +
" var options = select && select.options;" +
" for (var i = 0, iLen = options.length; i < iLen; i++) {" +
" var opt = options[i];" +
" opt.selected = values.indexOf(opt.value) >= 0;" +
" }" +
" }" +
" function addSpanWrapper(selectElement) {" +
" var spanElement = document.createElement(\"span\");" +
" spanElement.flutterInAppWebViewSelect = selectElement;" +
" new ResizeSensor(spanElement, function() {" +
" var style = selectElement.currentStyle || window.getComputedStyle(selectElement);" +
" var xMargin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);" +
" var yMargin = parseFloat(style.marginTop) + parseFloat(style.marginBottom);" +
" selectElement.style.width = (spanElement.getBoundingClientRect().width - xMargin) + \"px\";" +
" selectElement.style.height = (spanElement.getBoundingClientRect().height - yMargin) + \"px\";" +
" });" +
" spanElement.className = \"flutterInAppWebViewSelect-\" + uuid;" +
" spanElement.style.padding = \"0px\";" +
" spanElement.style.margin = \"0px\";" +
" spanElement.style.border = \"0px\";" +
" spanElement.style.display = \"inline-block\";" +
" spanElement.style.backgroundColor = \"transparent\";" +
" spanElement.style.position = \"relative\";" +
" pseudoStyle(spanElement, \"before\", {" +
" content: \"' '\"," +
" width: \"100%\"," +
" height: \"100%\"," +
" position: \"absolute\"," +
" top: \"0\"," +
" left: \"0\"," +
" \"z-index\": 99999999" +
" mutationObserver.observe(document.body, {" +
" childList: true," +
" subtree: true" +
" });" +
" selectElement.flutterInAppWebViewSpanWrapper = spanElement;" +
" var clickEventListener = function(event) {" +
" var self = this;" +
" event.preventDefault();" +
" var isDisabled = !!this.flutterInAppWebViewSelect.disabled;" +
" if (isDisabled) {" +
" return;" +
" }" +
" this.flutterInAppWebViewSelect.focus();" +
" var options = [];" +
" var optionElements = this.flutterInAppWebViewSelect.querySelectorAll(" +
" \"option\"" +
" );" +
" for (var i = 0; i < optionElements.length; i++) {" +
" var optionElement = optionElements[i];" +
" options.push({" +
" key: optionElement.textContent," +
" value: optionElement.value" +
" });" +
" }" +
" var isMultiple = !!this.flutterInAppWebViewSelect.multiple;" +
" window." + JavaScriptBridgeInterface.name + ".callHandler(" +
" \"flutterInAppWebViewDropDownWorkaround\"," +
" getIndexSelectValues(this.flutterInAppWebViewSelect)," +
" isMultiple," +
" options" +
" )" +
" .then(function(result) {" +
" if (result != null && result.values != null) {" +
" if (!isMultiple) {" +
" if (result.values.length > 0) {" +
" self.flutterInAppWebViewSelect.value = result.values[0];" +
" }" +
" } else {" +
" setMultipleValues(self.flutterInAppWebViewSelect, result.values);" +
" }" +
" }" +
" var evt = document.createEvent('HTMLEvents');" +
" evt.initEvent('change', false, true);" +
" self.flutterInAppWebViewSelect.dispatchEvent(evt);" +
" self.flutterInAppWebViewSelect.blur();" +
" });" +
" };" +
" spanElement.addEventListener('click', clickEventListener);" +
" divWithEventListeners.push({" +
" spanElement: spanElement," +
" clickEvent: clickEventListener" +
" });" +
" selectElement.parentNode.insertBefore(spanElement, selectElement);" +
" spanElement.appendChild(selectElement);" +
" uuid++;" +
" }" +
" function removeSpanWrapper(selectElement) {" +
" if (selectElement.flutterInAppWebViewSpanWrapper) {" +
" divWithEventListeners.splice(" +
" divWithEventListeners.indexOf(" +
" selectElement.flutterInAppWebViewSpanWrapper" +
" )," +
" 1" +
" );" +
" document.body.removeChild(selectElement.flutterInAppWebViewSpanWrapper);" +
" }" +
" }" +
" var selectElements = document.querySelectorAll('select');" +
" var divWithEventListeners = [];" +
" for (var selectElement of selectElements) {" +
" addSpanWrapper(selectElement);" +
" }" +
" var mutationObserver = new MutationObserver(function(mutations) {" +
" mutations.forEach(function(mutation) {" +
" for (var nodeElement of mutation.addedNodes) {" +
" if (nodeElement.tagName == 'SELECT') {" +
" addSpanWrapper(nodeElement);" +
" document.addEventListener('DOMContentLoaded', function() {" +
" dropDownWorkaround(window, document);" +
" var iframes = document.querySelectorAll('iframe');" +
" for (var i = 0; i < iframes.length; i++) {" +
" var iframe = iframes[i];" +
" var frameDocument;" +
" try {" +
" frameDocument = iframe.contentDocument;" +
" if (!frameDocument && iframe.contentWindow) {" +
" frameDocument = iframe.contentWindow.document;" +
" }" +
" }" +
" for (var nodeElement of mutation.removedNodes) {" +
" if (nodeElement.tagName == 'SELECT') {" +
" removeSpanWrapper(nodeElement);" +
" if (nodeElement.mutationObserver) {" +
" nodeElement.mutationObserver.disconnect();" +
" }" +
" if (frameDocument != null) {" +
" dropDownWorkaround(window, frameDocument);" +
" }" +
" } catch (error) {" +
" console.error(error);" +
" }" +
" });" +
" });" +
" mutationObserver.observe(document.body, {" +
" childList: true," +
" subtree: true" +
" }" +
" });" +
"})();";

7
android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
View File

@ -180,6 +180,9 @@ public class InAppWebViewClient extends WebViewClient {
if (webView.options.useOnLoadResource) {
js += InAppWebView.resourceObserverJS.replaceAll("[\r\n]+", "");
}
if (webView.options.dropDownWorkaroundEnabled && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
js += InAppWebView.dropDownWorkaroundJS.replaceAll("[\r\n]+", "");
}
js += InAppWebView.printJS.replaceAll("[\r\n]+", "");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
@ -226,10 +229,6 @@ public class InAppWebViewClient extends WebViewClient {
String js = InAppWebView.platformReadyJS.replaceAll("[\r\n]+", "");
if (webView.options.dropDownWorkaroundEnabled) {
js += InAppWebView.dropDownWorkaroundJS.replaceAll("[\r\n]+", "");
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript(js, (ValueCallback<String>) null);
} else {

1
lib/src/webview_options.dart
View File

@ -410,6 +410,7 @@ class AndroidInAppWebViewOptions
///Enable a temporary workaround for html dropdowns (`<select>` tags). It requires **JavaScript enabled**.
///It attempts to block click events for the dropdowns creating a custom `<div>` layer over the dropdown to intercept user's clicks.
///This workaround is applied as soon as the web page fires the `DOMContentLoaded` JavaScript event.
///The default value is `false`.
///
///**NOTE**: available on Android 19+.