我们一般在A域名的a.html用iframe内嵌B域名的proxy.html,达到将从a.html传输数据值proxy.html并且在proxy.html还可以执行a.html的函数。
a.html

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A域中的a.html</title>
</head>

<body>
<script>
function cb(data) {
    console.log('成功接收数据 ', data);
}
</script>
<iframe name="proxyIframe" hidden=""></iframe>

<form action="http://b.com/proxy.html?callback=cb&args=data" target="proxyIframe" method="post">
<input type="submit" value="提交">
</form>
</body>

</html>

这里用简单的用url传递几个参数给proxy.html
proxy.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>B域名的proxy.html</title>
</head>

<body>
<script>
window.onload = function() {
    console.log('onload');
    console.log(top);
    console.log(self);
    console.log(top == self)
        //如果此页面未被嵌套时返回,不执行
    if (top == self) return;

    var arr = location.search.substr(1).split('&'),
        fn, args;
    for (var i = 0, len = arr.length, item; i < len; i++) {
        item = arr[i].split('=');
        if (item[0] == 'callback') {
            fn = item[1];
        } else if (item[0] == 'args') {
            args = item[1];
        }
    }
    console.log(fn, args);
    try {
        eval('top.' + fn + '("' + args + '")'); //执行a.html的方法
        eval(fn + '("' + args + '")'); //执行当前页面的方法
    } catch (e) {

    }

    function cb(data) {
        console.log("执行cb", data);
    }
}
</script>
</body>

</html>

里面的top其实就是指向的是A域名的a.html里面的window
结果如下

分类: Javascript

发表评论

电子邮件地址不会被公开。 必填项已用*标注