iframe使用

主页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--<meta name="theme-color" content="#000000">-->
    <title>React App</title>
    <style>
        .iframe123{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 500px;
            margin-left: -250px;
            margin-top: -250px;
            border: #343cff 1px solid;
        }
    </style>
</head>
<body>
<!--<iframe src="https://www.baidu.com/" width="100%" height="300px" ></iframe>-->
<iframe src="./test1.html?name=啊" width="100%" height="300px"  id="gg" name="gg" frameborder="0" class="iframe123"></iframe>


主页面
<div id="root"></div>
<script >
    //只有firefox支持，IE，google不支持
    var childFrameObj = document.getElementById('gg');
    childFrameObj.contentWindow.paramFromParent = 'userId0007';


    //第二种方式，全部兼容
    var sex='男',age='20';
    window.gg.location.href=childFrameObj.src +"?sex=" + sex + "&age=" + age;

    // 第三种方式iframe中的src直接写，全部兼容
    //window.result.location.href=search.do +"?sex=" + sex + "&age=" + age;
</script>
</body>
</html>

子页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
iframe页面
<input type="text" value="" style="width: 360px">

<script type="text/javascript">
    // var param = window.paramFromParent;
    // console.log(window.paramFromParent)
    // var inputObject =  document.getElementsByTagName('input')[0];
    // inputObject.value = param;


    console.log('=====================')
    // console.log(window.top.age)
    console.log(window.location.search)
    var inputObject =  document.getElementsByTagName('input')[0];
    inputObject.value = window.location.search;


    function getQueryString(name) {
        var search = document.location.search;
        //alert(search);
        var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");
        var matcher = pattern.exec(search);
        var items = null;
        if (null != matcher) {
            try {
                items = decodeURIComponent(decodeURIComponent(matcher[1]));
            } catch (e) {
                try {
                    items = decodeURIComponent(matcher[1]);
                } catch (e) {
                    items = matcher[1];
                }
            }
        }
        return items;
    }
    console.log(getQueryString('sex'))

</script>
</body>
</html>

猜你喜欢