A small amount of information interaction under cross domain names

Problem description

There are two sites. Site A needs A state of site B to decide whether to display an iframe of station B. due to cross domain problems, station A and station B cannot enter and communicate, so the following scheme is designed

Code first

Page of site A

display page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div { height: 200px; width: 100%; background: blue; }
    </style>
</head>
<body>
<div>header</div>
<iframe id="iframe" src="http://b.com/set.html" style="display:block;" height="0" width="100%" frameborder="0" scrolling="no"></iframe>
<div>footer</div>
<script>
    function callback(height)
    {
        document.getElementById("iframe").height = height
    }

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

callback page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var QueryString = {};
    QueryString.parse = function (qs)
    {
        var pairs = qs.split("&"), obj = {}, pair, i, param, value;
        for (i = 0; i < pairs.length; i++)
        {
            if (pairs[i] === "") continue;
            pair = pairs[i].split("=");
            param = decodeURIComponent(pair[0]);
            value = decodeURIComponent(pair[1]);
            if (obj[param] != null)
            {
                if ("[object Array]" != Object.prototype.toString.call(obj[param]))
                {
                    obj[param] = [obj[param], value];
                }
                else
                {
                    obj[param].push(value);
                }
            }
            else
            {
                obj[param] = value;
            }
        }
        return obj;
    };
    var search = QueryString.parse(location.search.slice(1));
    top.callback(search.height);
    location.href = search.redirect;
</script>
</body>
</html>

Page of site B

set page

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    location.href = "http://a.com/callback.html?height=30&redirect=http%3A%2F%2Fb.com%2Ftarget.html";
</script>
</body>
</html>

Target target display page

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
hello world!
</body>
</html>

analysis

iframe of station A first loads the set page of station B. since station B can update the set page, the parameters in the set page can be changed at any time
What the set page needs to do is to take some information of station B back to station A through location.href. Here, the receiving address we set is http://a.com/callback.html,
After the callback of station A is loaded by the page, it is free to get its own URL, that is to say, it can get the parameters brought by station B. in DEMO, I set two parameters to parse parameters and perform related actions

  • Height, used to tell iframe height in a.com/display.html
  • redirect is used to return to the address of station B. note that as a parameter in the URL, the URL link needs to be encoded by encodeuriccomponent

Posted on Sun, 03 May 2020 03:30:02 -0400 by Immortal55