通过contentWindow操作iframe的简单demo

最新推荐文章于 2024-06-14 10:09:36 发布

原创最新推荐文章于 2024-06-14 10:09:36 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

60 篇文章

订阅专栏

本文展示了一个简单的跨窗体通信实例，通过在主页面中调用iframe内嵌页面的方法，实现页面间的数据传递和状态更新。具体实现包括定义iframe内页面的功能函数，并在主页面点击事件中调用这些函数来改变iframe内页面的状态。

页面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>