React Native WebView无法接收postMessage返回的页面高度数据求助

1. 消息处理逻辑判断错误：RN侧onMessage中写的判断条件是if ('object' == typeof data && data.external_url_open)，而你传递高度数据时external_url_open的值为null，布尔判定为假，整个分支直接跳过，高度处理逻辑完全不会执行。
2. 字段不匹配：就算进入高度处理分支，你打印的是data.page_height，但注入JS传递的高度字段是height，必然打印不出有效内容。
3. 注入JS执行时机问题：你现在的高度计算代码是注入后立即执行，大概率页面DOM还未完全渲染，要么高度计算不准，极端情况会因为上下文未初始化完成导致postMessage没正常触发。

1. 修正RN侧onMessage逻辑 #

将链接跳转和高度获取的处理逻辑解耦，不要绑定在同一个判断条件里：

<WebView
  javascriptEnabled={true}
  onMessage={(event) => {
    let data = event.nativeEvent.data;
    try {
      data = JSON.parse(data)
    } catch (e) {
      return // 解析失败直接终止后续逻辑
    }

    if (typeof data === 'object') {
      // 单独处理外部链接跳转
      if (data.external_url_open) {
        Linking.openURL(data.external_url_open);
      }
      // 单独处理高度获取
      if (data.height) {
        const height = data.height;
        console.log('获取到的页面高度：', height);
        // 此处补充你更新WebView高度的业务逻辑，比如setState
      }
    }
  }}
  injectedJavaScript={jsCode}
  // 其他属性保留
/>

2. 调整注入JS的执行时机 #

等页面资源、DOM完全加载后再计算高度，避免拿到无效值：

// 把高度发送逻辑包在window.onload里，确保DOM渲染完成
window.onload = function() {
  window.ReactNativeWebView.postMessage(JSON.stringify({
    external_url_open: null,
    height: Math.max(document.body.offsetHeight, document.body.scrollHeight, document.documentElement.clientHeight)
  }));
}

// 原有的链接点击处理逻辑保留即可
(function(){
  var attachEvent = function(elem, event, callback)
  {
      ...
  }    
  var all_links = document.querySelectorAll('a[href]');    
  if ( all_links ) {
      for ( var i in all_links ) {
          if ( all_links.hasOwnProperty(i) ) {
              attachEvent(all_links[i], 'onclick', function(e){
                  if ( new RegExp( '^https?:\/\/www.dropbox\.com.*', 'gi' ).test( this.href ) ) {
                      e.preventDefault();
                      window.ReactNativeWebView.postMessage(JSON.stringify({
                          external_url_open: this.href,
                      }));
                  }
                  else { window.location.href = this.href; }
              });
          }
      }
  }
})();

3. 适配动态内容场景（可选） #

如果页面内容是接口请求后动态渲染的，可以加个200-500ms的延迟再发送高度，或者接入MutationObserver监听DOM变化，动态更新高度。

内容的提问来源于stack exchange，提问作者SMNK