Browse Source

Merge pull request #135 from esjs/master

Adds additional height checks for cases when MutationObserver cannot detect changes.
iou90 4 years ago
parent
commit
33ec4a885a
No account linked to committer's email address
1 changed files with 44 additions and 19 deletions
  1. 44
    19
      autoHeightWebView/utils.js

+ 44
- 19
autoHeightWebView/utils.js View File

@@ -13,17 +13,40 @@ observer.observe(document, {
13 13
 
14 14
 const updateSizeWithMessage = element =>
15 15
   `
16
-  var updateSizeInterval = null;
17
-  var height = 0;
16
+  var lastHeight = 0;
17
+  var heightTheSameTimes = 0;
18
+  var maxHeightTheSameTimes = 5;
19
+  var forceRefreshDelay = 1000;
20
+  var forceRefreshTimeout;
21
+
18 22
   function updateSize(event) {
19
-    if (!window.hasOwnProperty('ReactNativeWebView') || !window.ReactNativeWebView.hasOwnProperty('postMessage')) {
20
-      !updateSizeInterval && (updateSizeInterval = setInterval(updateSize, 200));
23
+    if (
24
+      !window.hasOwnProperty('ReactNativeWebView') || 
25
+      !window.ReactNativeWebView.hasOwnProperty('postMessage')
26
+    ) {
27
+      setTimeout(updateSize, 200);
21 28
       return;
22 29
     }
23
-    clearInterval(updateSizeInterval)
24 30
     height = ${element}.offsetHeight || document.documentElement.offsetHeight;
25 31
     width = ${element}.offsetWidth || document.documentElement.offsetWidth;
26 32
     window.ReactNativeWebView.postMessage(JSON.stringify({ width: width, height: height }));
33
+
34
+    // Make additional height checks (required to fix issues wit twitter embeds)
35
+    clearTimeout(forceRefreshTimeout);
36
+    if (lastHeight !== height) {
37
+      heightTheSameTimes = 1;
38
+    } else {
39
+      heightTheSameTimes++;
40
+    }
41
+
42
+    lastHeight = height;
43
+
44
+    if (heightTheSameTimes <= maxHeightTheSameTimes) {
45
+      forceRefreshTimeout = setTimeout(
46
+        updateSize,
47
+        heightTheSameTimes * forceRefreshDelay
48
+      );
49
+    }
27 50
   }
28 51
   `;
29 52
 
@@ -47,7 +70,6 @@ const getBaseScript = ({ style, zoomable }) =>
47 70
     }
48 71
     document.body.appendChild(wrapper);
49 72
   }
50
-  var width = ${getWidth(style)};
51 73
   ${updateSizeWithMessage('wrapper')}
52 74
   window.addEventListener('load', updateSize);
53 75
   window.addEventListener('resize', updateSize);
@@ -60,13 +82,13 @@ const appendFilesToHead = ({ files, script }) =>
60 82
   files.reduceRight((combinedScript, file) => {
61 83
     const { rel, type, href } = file;
62 84
     return `
63
-          var link  = document.createElement('link');
64
-          link.rel  = '${rel}';
65
-          link.type = '${type}';
66
-          link.href = '${href}';
67
-          document.head.appendChild(link);
68
-          ${combinedScript}
69
-        `;
85
+      var link  = document.createElement('link');
86
+      link.rel  = '${rel}';
87
+      link.type = '${type}';
88
+      link.href = '${href}';
89
+      document.head.appendChild(link);
90
+      ${combinedScript}
91
+    `;
70 92
   }, script);
71 93
 
72 94
 const screenWidth = Dimensions.get('window').width;
@@ -83,17 +105,20 @@ const appendStylesToHead = ({ style, script }) => {
83 105
   // Escape any single quotes or newlines in the CSS with .replace()
84 106
   const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
85 107
   return `
86
-          var styleElement = document.createElement('style');
87
-          styleElement.innerHTML = '${escaped}';
88
-          document.head.appendChild(styleElement);
89
-          ${script}
90
-        `;
108
+    var styleElement = document.createElement('style');
109
+    styleElement.innerHTML = '${escaped}';
110
+    document.head.appendChild(styleElement);
111
+    ${script}
112
+  `;
91 113
 };
92 114
 
93 115
 const getInjectedSource = ({ html, script }) => `
94 116
 ${html}
95 117
 <script>
96
-${script}
118
+// prevents code colissions with global scope
119
+(() => {
120
+  ${script}
121
+})();
97 122
 </script>
98 123
 `;
99 124