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

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

InfoQ社区编辑,CSDN前端博客专家

毕业于西安文理学院电子信息工程专业

长期活跃于开源软件社区 GitHub,专注于物联网和前端领域。

著有《自己动手设计物联网》(电子工业出版社)、曾作为技术专家审阅英国 Packt 出版社的物联网书籍《Learning IoT》、《Smart IoT》等书。

在 GitHub 开源有《Growth:全栈增长工程师指南》等六本电子书,并译有《物联网实战指南》。

联系我: h@phodal.com

标签

最近的一些事