game-frame-template/src/frame.js

import { changeButtonsDisplay, setPauseButtonStatus } from './dom';
import { creatData, onPlayMessage } from './message';

import { game } from './config';

let frame = document.getElementById('iframe');
let contentWindow = frame.contentWindow;

// 设置iframe框架的样式
export function setFrameStyle() {
  const html = document.documentElement;
  frame.style.width = html.clientWidth + 'px';
  frame.style.height = Math.round(html.clientWidth * game.frame.height / game.frame.width) + 'px';
}

// 收到消息
export function onMessage() {
  window.addEventListener('message', function(e) {
    console.log('父-接受：', e.data);
    // if (e.source !== frame.src) return; // 来源
    const { event } = e.data;

    if (event === 'pause' || event === 'continue' || event === 'finish') { // 暂停
      sendMessage(event);
      changeButtonsDisplay(event); // DEBUG: 改变按钮状态 正式使用不需要的话 就删除掉
    }
    if (event === 'pause' || event === 'continue') { // 暂停
      setPauseButtonStatus(event === 'pause' ? 0 : 1);
    }
    if (event === 'play') {
      onPlayMessage(e.data.data);
    }

  }, false);
}

/**
 * 发送消息
 * @param {string} type 消息类型
 */
export function sendMessage(type, ...args) {
  const data = creatData(type, ...args);
  if (!data) {
    return console.error('错误: 发送消息数据为空'); // DEBUG:
  }
  contentWindow.postMessage(data, frame.src);
}