通过iframe中input元素的改变使页面中某个元素背景颜色改变

<input type="color" onchange="handleChange(event)" />

function handleChange(event){
    window.parent.document.querySelector('div').style.backgroundColor = event.target.value
}

可能会出现的问题：

1. Blocked a frame with origin "null" from accessing a cross-origin frame.

• 出现这个错误的原因是：不允许一个域为null的iframe页面访问一个域为null的页面
• 解决方案：通过localhost进行访问
  1. 搭建一个NodeJs服务器
  2. 运行该服务器
  3. 通过localhost的public目录进行访问

npm install express --save

const express = require('express')
const app = express()
const path = require('path')

app.use('/public',express.static(path.join(__dirname,'/public'))) //开放静态资源

app.listen(3333,function(){
    console.log('listen at 3333')
})

node server.js

1.jpg