iframe

项目需要：iframe引用子页面（子页面跟父页面的主域名相同，二级域名不同的情况）；
主页面：使用vue-cli脚手架启动项目，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>主页面</title>
</head>
<body>

<div style="margin: 20px">
  主页面
</div>

<div id="app"></div>
<iframe src="http://www.zhufengpeixun.cn:81/#/refund" width="900px" height="400px"  id="gg1" name="gg1"></iframe>
<script>
  document.domain='zhufengpeixun.cn';
  console.log('=================123');
  setTimeout(function () {
    console.log(window.frames["gg1"].document.getElementById("app"))
    window.frames["gg1"].document.getElementById("app").style.display='none'
    window.frames["gg1"].fang()
  },3000)
</script>
</body>
</html>

子页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>主页面</title>
</head>
<body>

<div style="margin: 20px">
  主页面
</div>

<div id="app"></div>
<script>
        document.domain='zhufengpeixun.cn';
        function fang(){
            alert("test");
        }
</script>
</body>
</html>

本地host文件改动

10.133.254.128   www.zhufengpeixun.cn
10.133.254.23        aa.zhufengpeixun.cn

证明，二级域名不同，同时端口也不一样的情况下，通过设置 document.domain=’zhufengpeixun.cn’;成功的在主页面上获取到子页面的元素，方法，并且使得子页面元素隐藏

猜你喜欢