暂无描述

utils.js 4.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. 'use strict';
  2. import { Dimensions, Platform } from 'react-native';
  3. const domMutationObserveScript = `
  4. var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  5. var observer = new MutationObserver(updateSize);
  6. observer.observe(document, {
  7. subtree: true,
  8. attributes: true
  9. });
  10. `;
  11. const updateSizeWithMessage = element =>
  12. `
  13. var updateSizeInterval = null;
  14. var height = 0;
  15. function updateSize(event) {
  16. if (!window.hasOwnProperty('ReactNativeWebView') || !window.ReactNativeWebView.hasOwnProperty('postMessage')) {
  17. !updateSizeInterval && (updateSizeInterval = setInterval(updateSize, 200));
  18. return;
  19. }
  20. clearInterval(updateSizeInterval)
  21. height = ${element}.offsetHeight || window.innerHeight;
  22. width = ${element}.offsetWidth || window.innerWidth;
  23. window.ReactNativeWebView.postMessage(JSON.stringify({ width: width, height: height, event: event }));
  24. }
  25. `;
  26. // add viewport setting to meta for WKWebView
  27. const makeScalePageToFit = `
  28. var meta = document.createElement('meta');
  29. meta.setAttribute('name', 'viewport');
  30. meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
  31. `;
  32. const getBaseScript = style =>
  33. `
  34. ;
  35. if (!document.getElementById("rnahw-wrapper")) {
  36. var wrapper = document.createElement('div');
  37. wrapper.id = 'rnahw-wrapper';
  38. while (document.body.firstChild instanceof Node) {
  39. wrapper.appendChild(document.body.firstChild);
  40. }
  41. document.body.appendChild(wrapper);
  42. }
  43. var width = ${getWidth(style)};
  44. ${updateSizeWithMessage('wrapper')}
  45. window.addEventListener('load', updateSize);
  46. window.addEventListener('resize', updateSize);
  47. ${domMutationObserveScript}
  48. ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
  49. updateSize();
  50. `;
  51. const appendFilesToHead = ({ files, script }) =>
  52. files.reduceRight((combinedScript, file) => {
  53. const { rel, type, href } = file;
  54. return `
  55. var link = document.createElement('link');
  56. link.rel = '${rel}';
  57. link.type = '${type}';
  58. link.href = '${href}';
  59. document.head.appendChild(link);
  60. ${combinedScript}
  61. `;
  62. }, script);
  63. const screenWidth = Dimensions.get('window').width;
  64. const bodyStyle = `
  65. body {
  66. margin: 0;
  67. padding: 0;
  68. }
  69. `;
  70. const appendStylesToHead = ({ style, script }) => {
  71. const currentStyles = style ? bodyStyle + style : bodyStyle;
  72. // Escape any single quotes or newlines in the CSS with .replace()
  73. const escaped = currentStyles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
  74. return `
  75. var styleElement = document.createElement('style');
  76. styleElement.innerHTML = '${escaped}';
  77. document.head.appendChild(styleElement);
  78. ${script}
  79. `;
  80. };
  81. const getInjectedSource = ({ html, script }) => `
  82. ${html}
  83. <script>
  84. ${script}
  85. </script>
  86. `;
  87. const getScript = props => {
  88. const { files, customStyle, customScript, style } = props;
  89. let script = getBaseScript(style);
  90. script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
  91. script = appendStylesToHead({ style: customStyle, script });
  92. customScript && (script = customScript + script);
  93. return script;
  94. };
  95. export const getWidth = style => {
  96. return style && style.width ? style.width : screenWidth;
  97. };
  98. export const isSizeChanged = ({ height, previousHeight, width, previousWidth }) => {
  99. if (!height || !width) {
  100. return;
  101. }
  102. return height !== previousHeight || width !== previousWidth;
  103. }
  104. export const getMemoInputProps = props => {
  105. const { files, customStyle, customScript, style, source, baseUrl } = props;
  106. return [files, customStyle, customScript, style, source, baseUrl];
  107. };
  108. export const getMemoResult = props => {
  109. const { source, baseUrl } = props;
  110. const script = getScript(props);
  111. if (source.html) {
  112. let currentSource = { html: getInjectedSource({ html: source.html, script }) };
  113. baseUrl && Object.assign(currentSource, { baseUrl });
  114. return { source: currentSource };
  115. } else {
  116. let currentSource = Object.assign({}, source);
  117. baseUrl && Object.assign(currentSource, { baseUrl });
  118. return {
  119. source: currentSource,
  120. script
  121. };
  122. }
  123. };