iframe父子页面传参--开发实战

110 阅读1分钟

场景:父页面A嵌套子页面B

1.通过url链接传递参数
<!DOCTYPE html>
<html>
<head>
  <title>父页面A</title>
</head>
<body>
  <div class="parent">
    <iframe src="./b.html?key=123&name=test"></iframe>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>子页面B</title>
</head>
<body>
</body>
<script type="text/javascript">
  /**
   * 接收URl参数
   */
let name = getQueryString("name");//name=test
let key = getQueryString("key");//key=123
// 获取URL参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
</script>
</html>
2.通过cookie获取参数(解决跨域)
<!DOCTYPE html>
<html>
<head>
  <title>父页面A</title>
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
<body>
  <div class="parent">
    <iframe src="./b.html"></iframe>
  </div>
</body>
<script type="text/javascript">
let name='test';
$.cookie('name', name, {
    path: '/',
    domain: 'url域名'//处理跨域
    }); //cookie写入回传标识
</script>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>子页面B</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
    let name = $.cookie("name");
    console.log(name);//输出test
}
</script>
</html>