game-frame-template/src/frame.js

import { game } from './config';
import { creatData } from './message';

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 handleEventButtons() {
  const eventButtons = document.querySelectorAll('div.events button');

  eventButtons.forEach(item => {
    item.addEventListener('click', function () {
      const { event } = item.dataset;

      switch (event) {
        case 'pause':
        case 'continue':
          setPauseButtonStatus(item, +item.dataset.status);
          break;
      }
      changeButtonsDisplay(event);
      sendMessage(event);
    })
  })
}

// play code按钮 绑定动作 发送消息
export function handlePlayCodeButtons() {
  const actionButtons = document.querySelectorAll('div.actions button');

  actionButtons.forEach(item => {
    item.addEventListener('click', function () {
      const { code } = item.dataset;

      sendMessage('play', code);
    })
  })
}

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

    if (event === 'pause') { // 暂停
      changeButtonsDisplay('pause');
      sendMessage('pause');
    } else if (event === 'continue') { // 继续
      changeButtonsDisplay('continue');
      sendMessage('continue');
    } else if (event === 'finish') {
      // 结束
      // 回传finish信息
      // 切换按钮状态
      sendMessage('finish');
      changeButtonsDisplay('finish');
    }
  }, false);
}

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

/**
 * 设置 暂停/继续 按钮的状态样式等
 * @param {HTMLElement} element
 * @param {number} type
 */
function setPauseButtonStatus(element, type) {
  if (type === 0) { // 点击的是暂停
    element.dataset.status = '1';
    element.dataset.event = 'continue';
    element.textContent = '继续';
    element.classList.remove('btn-warning');
    element.classList.add('btn-success');
  } else {
    // 点击的是继续 游戏
    element.dataset.status = '0';
    element.dataset.event = 'pause';
    element.textContent = '暂停';
    element.classList.remove('btn-success');
    element.classList.add('btn-warning');
  }
}

/**
 * 切换按钮的显示状态
 * @param eventType
 */
function changeButtonsDisplay(eventType) {
  const start = $id('start');
  const pause = $id('pause');
  const finish = $id('finish');
  const actionContainer = $id('action-container')
  if (eventType === 'start') { // 点了开始
    start.classList.add('d-none');
    pause.classList.remove('d-none');
    finish.classList.remove('d-none');
    actionContainer.classList.remove('d-none');
  } else if (eventType === 'finish') {
    start.classList.remove('d-none');
    pause.classList.add('d-none');
    finish.classList.add('d-none');
    actionContainer.classList.add('d-none');
  } else if ((eventType === 'pause')) {
    actionContainer.classList.add('d-none');
  } else if (eventType === 'continue') {
    actionContainer.classList.remove('d-none');
  }
}

/**
 * 通过id获取元素
 * @param {string} id
 * @returns {HTMLElement}
 */
function $id(id) {
  return document.getElementById(id);
}