Blog

Blog

PHODAL

React Native WebView onMessage 收不到 window.postMessage 消息

在为 Growth 添加一个 WebView 的时候,由于 JavaScript 代码比较多,发现自己写的 onMessage 根本收不到任何消息:

  handleMessage = (event: Object) => {
    const message = JSON.parse(event.nativeEvent.data);
    console.log(message);
  } 

对应的 WebView 代码:

  $(function() {
    window.postMessage(JSON.stringify({ status: 'ready' }));
    document.addEventListener('message', function (event) {
      var data = JSON.parse(event.data);
      if (data.action === 'algorithm') {
        window.algorithm = data.algorithm;
        $(window).trigger('bridge.run', window.algorithm);
      } else if (data.action === 'run') {
        $('#btn_run').trigger('click');
      } else if (data.action === 'run') {
        $('#btn_pause').trigger('click');
      }
    });
  })

发现这样写也是不行的。探索了好几天,才想到这个问题一定是一个 issue,然后找到了:react native html postMessage can not reach to WebView #11594

发现了同样的问题,对于这个问题的解决办法就是写一个 awaitPostMessage 方法:

function awaitPostMessage() {
  var isReactNativePostMessageReady = !!window.originalPostMessage;
  var queue = [];
  var currentPostMessageFn = function store(message) {
    if (queue.length > 100) queue.shift();
    queue.push(message);
  };
  if (!isReactNativePostMessageReady) {
    var originalPostMessage = window.postMessage;
    Object.defineProperty(window, 'postMessage', {
      configurable: true,
      enumerable: true,
      get: function () {
        return currentPostMessageFn;
      },
      set: function (fn) {
        currentPostMessageFn = fn;
        isReactNativePostMessageReady = true;
        setTimeout(sendQueue, 0);
      }
    });
    window.postMessage.toString = function () {
      return String(originalPostMessage);
    };
  }

  function sendQueue() {
    while (queue.length > 0) window.postMessage(queue.shift());
  }
}

然后再执行我们的 postMessage 方法,如下所示:

  $(function() {
    function awaitPostMessage() {
      var isReactNativePostMessageReady = !!window.originalPostMessage;
      var queue = [];
      var currentPostMessageFn = function store(message) {
        if (queue.length > 100) queue.shift();
        queue.push(message);
      };
      if (!isReactNativePostMessageReady) {
        var originalPostMessage = window.postMessage;
        Object.defineProperty(window, 'postMessage', {
          configurable: true,
          enumerable: true,
          get: function () {
            return currentPostMessageFn;
          },
          set: function (fn) {
            currentPostMessageFn = fn;
            isReactNativePostMessageReady = true;
            setTimeout(sendQueue, 0);
          }
        });
        window.postMessage.toString = function () {
          return String(originalPostMessage);
        };
      }

      function sendQueue() {
        while (queue.length > 0) window.postMessage(queue.shift());
      }
    };
    awaitPostMessage(); // Call this only once in your Web Code.

    window.postMessage(JSON.stringify({ status: 'ready' }));
    document.addEventListener('message', function (event) {
      var data = JSON.parse(event.data);
      if (data.action === 'algorithm') {
        window.algorithm = data.algorithm;
        $(window).trigger('bridge.run', window.algorithm);
      } else if (data.action === 'run') {
        $('#btn_run').trigger('click');
      } else if (data.action === 'run') {
        $('#btn_pause').trigger('click');
      }
    });
  })

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签