postMessage通信

最新推荐文章于 2024-07-04 00:59:27 发布

咸蛋超人l

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量420

点赞数 9

文章标签： javascript 前端 npm

本文链接：https://blog.csdn.net/weixin_50636536/article/details/130563358

版权

需要安装 npm i express -S

index.html

<body>
<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">Frame Color</div>
</div>
<div>
    <iframe id="child" src="http://localhost:1233/index.html"></iframe>
</div>

<script type="text/javascript">

    window.onload=function(){
        window.frames[0].postMessage('getcolor','http://localhost:1233');
    }

    window.addEventListener('message',function(e){
        console.log(e)
        var color=e.data;
        document.getElementById('color').style.backgroundColor=color;
    },false);
</script>
</body>

app.js

const express = require('express'); //需要安装 npm i express -S
const app = express();
app.use(express.static('static'));
app.listen(1234, err => {
    if (err) return;
    console.log('服务器启动在：' + 'http://localhost:1234');
});

在这里插入图片描述

index.html

<body style="height:100%;">
<div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
  click to change color
</div>
<script type="text/javascript">
  var container=document.getElementById('container');

  window.addEventListener('message',function(e){
    if(e.source!=window.parent) return;
    var color=container.style.backgroundColor;
    window.parent.postMessage(color,'*');
  },false);

  function changeColor () {
    var color=container.style.backgroundColor;
    if(color=='rgb(204, 102, 0)'){
      color='rgb(204, 204, 0)';
    }else{
      color='rgb(204,102,0)';
    }
    container.style.backgroundColor=color;
    window.parent.postMessage(color,'*');
  }
</script>
</body>

app2.js

const express = require('express'); //需要安装 npm i express -S
const app = express();
// const path = require('path');

//下边三行代码，哪个都可以，具体区别查看文章顶部的参考文章
// app.use(express.static(path.join(__dirname, 'static')));
// app.use(express.static(__dirname + '/static'));
app.use(express.static('static1'));


app.listen(1233, err => {
    if (err) return;
    console.log('服务器启动在：' + 'http://localhost:1233');
});