iframe骚操作

2021-03-28  本文已影响0人  小米和豆豆
  1. 新建 1个文件项目 2个文件,AA.html , BB.html;

AA.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <iframe id="ifram" src="./BB.html" frameborder="0" width="200px" height="200px"></iframe>
        <div id="dd">我是dd</div>
    </body>
</html>
<script>
    var age = "31237628";
    var name = "DDY";
    document.querySelector("#dd").addEventListener("click", (e) => {
           document.getElementById("ifram").contentWindow.postMessage("AAAAA","http://127.0.0.1:8848");
            ifram.contentWindow.B('我是父级调用传给子的参数!')
    }, false);
  //方法
    function A(data){
        console.log(data)
    }

</script>

BB.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      我是BB页面
</body>
</html>
<script>
    console.log(parent.window.name)
    window.onmessage=e=>{
        console.log(e);
        parent.window.A('我是子调用父方法传来的值!')
    }
  function B(data){
    console.log(data)
  }
</script>
  1. 运行AA页面,就可以向iframe里面传递数据,,至于调方法,也是大同小异.
上一篇下一篇

猜你喜欢

热点阅读