通過contentWindow操作iframe的簡單demo

 頁面A;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AAAA</title>
</head>
<body>
<a href="javascript:testclick();">這裏是indexA click</a>
<div id="abox"></div>
<iframe id='myiframe' src="indexB.html" frameborder="1"></iframe>
<script>
  let abox = document.getElementById('abox')
  function testclick() {
    let myiframeFun = document.getElementById('myiframe').contentWindow.aaaatest
    myiframeFun.add()
    abox.innerText = myiframeFun.getContext()
  }
</script>
</body>
</html>


頁面B:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BBBB</title>
</head>
<body>
這裏是頁面B
<div id="box"></div>
<script>
  let box = document.getElementById('box')
  var aaaatest = {
    add: function () {
      box.style.cssText = "background-color:#cdcdcd"
      box.innerText = "b頁面增加了內容"
    },
    getContext: function () {
      return box.innerText
    }
  }
</script>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章