HTML实际操作

一、postMessage

注意：

1. postMessage仅支持IE9、IE10、Google，其他浏览器没测过。
2. 不支持360浏览器和win10 edge浏览器。
3. 父窗口要在onload()函数中调用postMessage

1.基本使用

// 父窗口
<iframe src="kline.html" frameborder="0" width="100%" height="100%"></iframe>
<script>
    window.onload = function(){
        let str = 'hello'
        window.frames[0].postMessage(str, '*')
    }
</script>

// 子窗口
<script>
  window.addEventListener('message', (e)=> {
      console.log(e.data)
  })
</script>

2.使用iframe src属性传值

适合要求兼容性的项目 不要写onload()函数里面，否则会有一次打印为空的情况

// 父窗口
<iframe src="kline.html"
    id="iframe"
    frameborder="0"
  width="100%"
  height="100%"
  scrolling="no"></iframe>
<script>
    let str = 'usdt/btc'
  let frame = document.getElementById('iframe')
  frame.src = `kline.html?coin=${str}`
</script>

// 子窗口
<script>
  var url = decodeURI(location.search)
  console.log(url)
</script>

二、元素点击事件

<p></p>
// js
document.getElementsByTagName('p')[0].onclick = function(){
  console.log('click')
}
// Jquery
$('p').on('click', function(){
    console.log('click')
})