From c146d01854f672ca19bef23586f3c1c767f07e4a Mon Sep 17 00:00:00 2001 From: walty Date: Fri, 23 Nov 2018 14:10:17 +0800 Subject: [PATCH 01/10] fixed compatibility problem of postMessage patch script with new RN, and detect DOM change for the webview height update --- index.js | 46 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 40 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 3c52a68..042be0f 100644 --- a/index.js +++ b/index.js @@ -19,17 +19,50 @@ import { Platform, } from 'react-native'; +//https://github.com/facebook/react-native/issues/10865 +const patchPostMessageFunction = function() { + var originalPostMessage = window.postMessage; + + var patchedPostMessage = function(message, targetOrigin, transfer) { + originalPostMessage(message, targetOrigin, transfer); + }; + + patchedPostMessage.toString = function() { + return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage'); + }; + + window.postMessage = patchedPostMessage; +}; + const injectedScript = function() { + + function postSize() { + //https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript + var body = document.body, html = document.documentElement; + + var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, + html.clientHeight, html.scrollHeight, html.offsetHeight ); + + window.postMessage(maxHeight); + } + function waitForBridge() { if (window.postMessage.length !== 1){ setTimeout(waitForBridge, 200); } else { - postMessage( - Math.max(document.documentElement.clientHeight, document.documentElement.scrollHeight, document.body.clientHeight, document.body.scrollHeight) - ) + postSize(); + + //trigger when DOM changes + var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; + var observer = new MutationObserver(postSize); + observer.observe(document, { + subtree: true, + attributes: true + }); } } + waitForBridge(); }; @@ -68,9 +101,10 @@ export default class MyWebView extends Component { render () { const _w = this.props.width || Dimensions.get('window').width; const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; - const androidScript = 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');' + - '(' + String(injectedScript) + ')();'; - const iosScript = '(' + String(injectedScript) + ')();' + 'window.postMessage = String(Object.hasOwnProperty).replace(\'hasOwnProperty\', \'postMessage\');'; + const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();'; + const androidScript = patchPostMessageJsCode + '(' + String(injectedScript) + ')();'; + const iosScript = '(' + String(injectedScript) + ')();' + patchPostMessageJsCode; + return ( { this.webview = ref; }} From c6b638d15a556acd8da5149eb8209293c4907b70 Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Wed, 24 Jul 2019 17:24:49 +0800 Subject: [PATCH 02/10] use react-native-webview instead --- index.js | 3 ++- package.json | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 042be0f..3477aca 100644 --- a/index.js +++ b/index.js @@ -15,9 +15,10 @@ import React, { Component } from 'react'; import { View, Dimensions, - WebView, Platform, } from 'react-native'; +import { WebView } from 'react-native-webview'; + //https://github.com/facebook/react-native/issues/10865 const patchPostMessageFunction = function() { diff --git a/package.json b/package.json index 5d795fb..7f9f140 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,9 @@ "auto", "height" ], + "peerDependencies": { + "react-native-webview": "5.9.0" + }, "author": "Elton Jain", "license": "ISC", "bugs": { From 58a5eec8674047f8e1c1f732ff955067265ab1db Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Thu, 25 Jul 2019 10:53:16 +0800 Subject: [PATCH 03/10] use native postmessage --- index.js | 55 ++++++++++++++++++------------------------------------- 1 file changed, 18 insertions(+), 37 deletions(-) diff --git a/index.js b/index.js index 3477aca..a262b6e 100644 --- a/index.js +++ b/index.js @@ -20,23 +20,7 @@ import { import { WebView } from 'react-native-webview'; -//https://github.com/facebook/react-native/issues/10865 -const patchPostMessageFunction = function() { - var originalPostMessage = window.postMessage; - - var patchedPostMessage = function(message, targetOrigin, transfer) { - originalPostMessage(message, targetOrigin, transfer); - }; - - patchedPostMessage.toString = function() { - return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage'); - }; - - window.postMessage = patchedPostMessage; -}; - const injectedScript = function() { - function postSize() { //https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript var body = document.body, html = document.documentElement; @@ -44,27 +28,26 @@ const injectedScript = function() { var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); - window.postMessage(maxHeight); + console.log('postSize maxHeight', maxHeight) + window.ReactNativeWebView.postMessage(maxHeight); } - function waitForBridge() { - if (window.postMessage.length !== 1){ - setTimeout(waitForBridge, 200); - } - else { - postSize(); - - //trigger when DOM changes - var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; - var observer = new MutationObserver(postSize); - observer.observe(document, { - subtree: true, - attributes: true - }); - } + var postSizeTimeout; + function debouncedPostSize() { + clearTimeout(postSizeTimeout); + postSizeTimeout = setTimeout(function () { + postSize() + }, 500) } - waitForBridge(); + debouncedPostSize(); + //trigger when DOM changes + var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; + var observer = new MutationObserver(debouncedPostSize); + observer.observe(document, { + subtree: true, + attributes: true + }); }; export default class MyWebView extends Component { @@ -102,14 +85,12 @@ export default class MyWebView extends Component { render () { const _w = this.props.width || Dimensions.get('window').width; const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; - const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();'; - const androidScript = patchPostMessageJsCode + '(' + String(injectedScript) + ')();'; - const iosScript = '(' + String(injectedScript) + ')();' + patchPostMessageJsCode; + const injectedJavaScript = '(' + String(injectedScript) + ')();'; return ( { this.webview = ref; }} - injectedJavaScript={Platform.OS === 'ios' ? iosScript : androidScript} + injectedJavaScript={injectedJavaScript} scrollEnabled={this.props.scrollEnabled || false} onMessage={this._onMessage} javaScriptEnabled={true} From aa6f34021ea6b8cf5601c678b4a524560367f53f Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Tue, 30 Jul 2019 00:22:23 +0800 Subject: [PATCH 04/10] change version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7f9f140..aa3f5da 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "height" ], "peerDependencies": { - "react-native-webview": "5.9.0" + "react-native-webview": "5.9.1" }, "author": "Elton Jain", "license": "ISC", From 86ed6fc7c797e7d16dbdb94552ef1ff04d8601ee Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Wed, 13 Nov 2019 19:39:14 +0800 Subject: [PATCH 05/10] for the max height --- index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index a262b6e..104b380 100644 --- a/index.js +++ b/index.js @@ -69,9 +69,12 @@ export default class MyWebView extends Component { } _onMessage(e) { - this.setState({ - webViewHeight: parseInt(e.nativeEvent.data) - }); + const maxHeight = this.props.maxHeight; + let webViewHeight = parseInt(e.nativeEvent.data); + if (maxHeight && webViewHeight > maxHeight) { + webViewHeight = maxHeight + } + this.setState({ webViewHeight }); } stopLoading() { From 0b3278205b439c44583d838ea369214998ec210a Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Sat, 8 Feb 2020 12:29:39 +0800 Subject: [PATCH 06/10] remove version limit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aa3f5da..f384a07 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "height" ], "peerDependencies": { - "react-native-webview": "5.9.1" + "react-native-webview": "^5.9.1" }, "author": "Elton Jain", "license": "ISC", From 34e74971ef76bee36d4c08cea82ed020a504f52f Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Fri, 11 Sep 2020 15:17:42 +0800 Subject: [PATCH 07/10] for new proj --- index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 104b380..98f20dd 100644 --- a/index.js +++ b/index.js @@ -25,8 +25,7 @@ const injectedScript = function() { //https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript var body = document.body, html = document.documentElement; - var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, - html.clientHeight, html.scrollHeight, html.offsetHeight ); + var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, html.offsetHeight ); console.log('postSize maxHeight', maxHeight) window.ReactNativeWebView.postMessage(maxHeight); @@ -48,6 +47,7 @@ const injectedScript = function() { subtree: true, attributes: true }); + window.addEventListener('resize', debouncedPostSize); }; export default class MyWebView extends Component { @@ -57,6 +57,7 @@ export default class MyWebView extends Component { static defaultProps = { autoHeight: true, + noWidth: false, } constructor (props: Object) { @@ -86,9 +87,12 @@ export default class MyWebView extends Component { } render () { + const _w = this.props.width || Dimensions.get('window').width; const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; const injectedJavaScript = '(' + String(injectedScript) + ')();'; + let style = !!this.props.noWidth ? []: [{width: _w}] + style = style.concat([this.props.style, {height: _h}]); return ( ) } From de7b4a0e039fd5444877070ed69f33c70b5e407f Mon Sep 17 00:00:00 2001 From: Bart Solutions Date: Tue, 10 Jan 2023 19:19:36 +0800 Subject: [PATCH 08/10] use multiple string, to avoid hermes related issue --- index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 98f20dd..ca0cdb0 100644 --- a/index.js +++ b/index.js @@ -20,7 +20,7 @@ import { import { WebView } from 'react-native-webview'; -const injectedScript = function() { +const injectedScript = `function() { function postSize() { //https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript var body = document.body, html = document.documentElement; @@ -48,7 +48,7 @@ const injectedScript = function() { attributes: true }); window.addEventListener('resize', debouncedPostSize); -}; +}` export default class MyWebView extends Component { state = { @@ -90,7 +90,10 @@ export default class MyWebView extends Component { const _w = this.props.width || Dimensions.get('window').width; const _h = this.props.autoHeight ? this.state.webViewHeight : this.props.defaultHeight; + const injectedJavaScript = '(' + String(injectedScript) + ')();'; + + console.log('@96', injectedJavaScript) let style = !!this.props.noWidth ? []: [{width: _w}] style = style.concat([this.props.style, {height: _h}]); From 4f0f59f5a5ed70d7bd3158e3b86d6a4fd6a35efb Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Sun, 23 Apr 2023 10:15:06 +0800 Subject: [PATCH 09/10] update peer dependency --- index.js | 1 - package.json | 4 +++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index ca0cdb0..06f4bcf 100644 --- a/index.js +++ b/index.js @@ -93,7 +93,6 @@ export default class MyWebView extends Component { const injectedJavaScript = '(' + String(injectedScript) + ')();'; - console.log('@96', injectedJavaScript) let style = !!this.props.noWidth ? []: [{width: _w}] style = style.concat([this.props.style, {height: _h}]); diff --git a/package.json b/package.json index f384a07..2e6422a 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,9 @@ "height" ], "peerDependencies": { - "react-native-webview": "^5.9.1" + "react": ">= 16.8.0", + "react-native": ">= 0.60.0", + "react-native-webview": ">= 10.9.0" }, "author": "Elton Jain", "license": "ISC", From 2c8b6378b0cacbb956ea029999a872c63b7f89d6 Mon Sep 17 00:00:00 2001 From: gongdao123 Date: Mon, 5 Jan 2026 14:40:22 +0800 Subject: [PATCH 10/10] fix the autoheight problem --- index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index 06f4bcf..f85df0d 100644 --- a/index.js +++ b/index.js @@ -28,7 +28,7 @@ const injectedScript = `function() { var maxHeight = Math.max( body.scrollHeight, body.offsetHeight, html.offsetHeight ); console.log('postSize maxHeight', maxHeight) - window.ReactNativeWebView.postMessage(maxHeight); + window.ReactNativeWebView.postMessage(maxHeight.toString()); } var postSizeTimeout; @@ -94,7 +94,7 @@ export default class MyWebView extends Component { const injectedJavaScript = '(' + String(injectedScript) + ')();'; let style = !!this.props.noWidth ? []: [{width: _w}] - style = style.concat([this.props.style, {height: _h}]); + style = style.concat([this.props.style, {flex: 0, height: _h}]); return (