iou90 6 years ago
parent
commit
f022a5e10a
3 changed files with 54 additions and 41 deletions
  1. 13
    1
      autoHeightWebView/common.js
  2. 40
    29
      autoHeightWebView/index.android.js
  3. 1
    11
      autoHeightWebView/index.ios.js

+ 13
- 1
autoHeightWebView/common.js View File

151
     subtree: true,
151
     subtree: true,
152
     attributes: true
152
     attributes: true
153
 });
153
 });
154
-`;
154
+`;
155
+
156
+export const getCurrentSize = `
157
+function getSize(container) {
158
+  var height = container.clientHeight || document.body.offsetHeight;
159
+  var width = container.clientWidth || document.body.offsetWidth;
160
+  return {
161
+    height,
162
+    width
163
+  };
164
+}
165
+`;
166
+

+ 40
- 29
autoHeightWebView/index.android.js View File

18
 
18
 
19
 import Immutable from 'immutable';
19
 import Immutable from 'immutable';
20
 
20
 
21
-import { handleSizeUpdated, getWidth, getScript, domMutationObserveScript } from './common.js';
21
+import { handleSizeUpdated, getWidth, getScript, domMutationObserveScript, getCurrentSize } from './common.js';
22
 
22
 
23
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
23
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
24
   nativeOnly: {
24
   nativeOnly: {
77
     super(props);
77
     super(props);
78
     const { enableAnimation, style } = props;
78
     const { enableAnimation, style } = props;
79
     enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
79
     enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
80
-    this.webView = React.createRef();
81
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
80
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
82
     this.state = {
81
     this.state = {
83
       isChangingSource: false,
82
       isChangingSource: false,
153
   }
152
   }
154
 
153
 
155
   onMessage = e => {
154
   onMessage = e => {
155
+    console.log(e)
156
     const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
156
     const { height, width } = JSON.parse(isBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
157
     const { height: oldHeight, width: oldWidth } = this.state;
157
     const { height: oldHeight, width: oldWidth } = this.state;
158
     if ((height && height !== oldHeight) || (width && width !== oldWidth)) {
158
     if ((height && height !== oldHeight) || (width && width !== oldWidth)) {
201
     onLoadEnd && onLoadEnd(event);
201
     onLoadEnd && onLoadEnd(event);
202
   };
202
   };
203
 
203
 
204
+  getWebView = webView => (this.webView = webView);
205
+
204
   stopLoading() {
206
   stopLoading() {
205
     UIManager.dispatchViewManagerCommand(
207
     UIManager.dispatchViewManagerCommand(
206
       findNodeHandle(this.webView),
208
       findNodeHandle(this.webView),
211
 
213
 
212
   render() {
214
   render() {
213
     const { height, width, script, isChangingSource, heightOffset } = this.state;
215
     const { height, width, script, isChangingSource, heightOffset } = this.state;
214
-    const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl, scrollEnabled } = this.props;
216
+    const { scalesPageToFit, enableAnimation, source, style, enableBaseUrl, scrollEnabled } = this.props;
215
     let webViewSource = source;
217
     let webViewSource = source;
216
     if (enableBaseUrl) {
218
     if (enableBaseUrl) {
217
       webViewSource = Object.assign({}, source, {
219
       webViewSource = Object.assign({}, source, {
235
             onLoadingStart={this.onLoadingStart}
237
             onLoadingStart={this.onLoadingStart}
236
             onLoadingFinish={this.onLoadingFinish}
238
             onLoadingFinish={this.onLoadingFinish}
237
             onLoadingError={this.onLoadingError}
239
             onLoadingError={this.onLoadingError}
238
-            originWhitelist={['*']}
239
-            ref={this.webView}
240
+            originWhitelist={['.*']}
241
+            ref={this.getWebView}
240
             style={styles.webView}
242
             style={styles.webView}
241
             javaScriptEnabled={true}
243
             javaScriptEnabled={true}
242
-            injectedJavaScript={script + customScript}
244
+            injectedJavaScript={script}
243
             scalesPageToFit={scalesPageToFit}
245
             scalesPageToFit={scalesPageToFit}
244
             scrollEnabled={!!scrollEnabled}
246
             scrollEnabled={!!scrollEnabled}
245
             source={webViewSource}
247
             source={webViewSource}
266
   }
268
   }
267
 });
269
 });
268
 
270
 
269
-const getBaseScript = isBelowKitKat
270
-  ? function() {
271
-      return `
272
-  ; (function () {
271
+const updateSize = `
272
+  function updateSize() {
273
+    if(document.body.offsetHeight !== height || document.body.offsetWidth !== width) {
274
+      var size = getSize(document.body.firstChild); 
275
+      height = size.height;
276
+      width = size.width;
277
+      AutoHeightWebView.send(JSON.stringify({ width, height }));
278
+    }
279
+  }
280
+`
281
+
282
+const commonScript = `
283
+    ${getCurrentSize}
284
+    ${updateSize}
273
     var wrapper = document.createElement('div');
285
     var wrapper = document.createElement('div');
274
     wrapper.id = 'wrapper';
286
     wrapper.id = 'wrapper';
275
     while (document.body.firstChild instanceof Node) {
287
     while (document.body.firstChild instanceof Node) {
276
         wrapper.appendChild(document.body.firstChild);
288
         wrapper.appendChild(document.body.firstChild);
277
     }
289
     }
290
+`;
291
+
292
+const getBaseScript = isBelowKitKat
293
+  ? function(style) {
294
+      return `
295
+    ; 
296
+    var height = 0;
297
+    var width = ${getWidth(style)};
298
+    (function () {
299
+    ${commonScript}
278
     document.body.appendChild(wrapper);
300
     document.body.appendChild(wrapper);
279
-    AutoHeightWebView.onMessage = function (message) {
280
-        var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
281
-        var width = Math.round(rect.width);
282
-        var height = Math.round(rect.height);
283
-        AutoHeightWebView.send(JSON.stringify({ width, height }));
284
-    };
301
+    AutoHeightWebView.onMessage = updateSize;
285
     ${domMutationObserveScript}
302
     ${domMutationObserveScript}
286
 } ());
303
 } ());
287
   `;
304
   `;
288
     }
305
     }
289
-  : function() {
306
+  : function(style) {
290
       return `
307
       return `
291
-  ; (function () {
292
-    var wrapper = document.createElement('div');
293
-    wrapper.id = 'wrapper';
294
-    while (document.body.firstChild instanceof Node) {
295
-        wrapper.appendChild(document.body.firstChild);
296
-    }
308
+    ; 
309
+    var height = 0;
310
+    var width = ${getWidth(style)};
311
+    (function () {
312
+    ${commonScript}
297
     document.body.appendChild(wrapper);
313
     document.body.appendChild(wrapper);
298
-    document.addEventListener('message', function (e) {
299
-        var rect = document.body.firstElementChild.getBoundingClientRect().toJSON();
300
-        var width = Math.round(rect.width);
301
-        var height = Math.round(rect.height);
302
-        window.postMessage(JSON.stringify({ width, height }));
303
-    });
314
+    document.addEventListener('message', updateSize);
304
     ${domMutationObserveScript}
315
     ${domMutationObserveScript}
305
 } ());
316
 } ());
306
   `;
317
   `;

+ 1
- 11
autoHeightWebView/index.ios.js View File

6
 
6
 
7
 import PropTypes from 'prop-types';
7
 import PropTypes from 'prop-types';
8
 
8
 
9
-import { getSize, isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript } from './common.js';
9
+import { getSize, isEqual, setState, getWidth, handleSizeUpdated, domMutationObserveScript, getCurrentSize } from './common.js';
10
 
10
 
11
 import momoize from './momoize';
11
 import momoize from './momoize';
12
 
12
 
175
     window.addEventListener('resize', updateSize);
175
     window.addEventListener('resize', updateSize);
176
     `;
176
     `;
177
 
177
 
178
-const getCurrentSize = `
179
-    function getSize(container) {
180
-      var height = container.clientHeight || document.body.offsetHeight;
181
-      var width = container.clientWidth || document.body.offsetWidth;
182
-      return {
183
-        height,
184
-        width
185
-      };
186
-    }
187
-    `;
188
 
178
 
189
 function getBaseScript(style) {
179
 function getBaseScript(style) {
190
   return `
180
   return `