首页
前端开发

分类

当前位置: 云海天教程网 > 技术新闻 > 前端开发 >正文

跨域访问方法介绍(4)-

更新时间:2021-06-20  作者:佚名   来源: 网络转载

跨域访问方法介绍(4)-

浏览器窗口有 window.name 属性。这个属性的最大特点是,无论是否同源,只要在同一个窗口里,前一个网页设置了这个属性,后一个网页可以读取它。这种方法的优点是,window.name 容量很大,可以放置非常长的字符串;缺点是必须监听子窗口 window.name 属性的变化,影响网页性能。本文主要介绍使用 window.name 来实现跨域数据传递,文中所使用到的软件版本:Chrome 90.0.4430.212。

1、步骤说明

在 a.html(http://localhost:8080/a.html) 页面打开 c.html(http://localhost:9090/c.html) 页面,c.html 页面设置 window.name 属性并跳转到 b.html(http://localhost:8080/a.html),此时在 a.html 页面就可以获取到 c.html 页面设置的 window.name 属性的值。

2、a.html(http://localhost:8080/a.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.name 测试</title>

</head>
<body>
    <button onclick="openChild()">打开子页面</button>
</body>

<script type="text/javascript">
    function openChild() {
        let childWindow = window.open("http://localhost:9090/c.html");
        
        //监听子窗口window.name的变化
        let interval = setInterval(function(){
            //子窗口window.name发生变化,停止定时任务
            if (childWindow.name) {
                clearInterval(interval);
                console.log(childWindow.name);
                childWindow.close();
            }
        }, 2000);
    }
    
</script>
</html>

3、b.html(http://localhost:8080/b.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>代理页面</title>
<script type="text/javascript">
    alert(window.name);    
</script>
</head>
<body>
    操作成功。该页面即将自动关闭...
</body>
</html>

4、c.html(http://localhost:9090/c.html)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数据</title>

<script type="text/javascript">
    //模拟用户操作后,页面跳转
    setTimeout(function() {
        window.name = "你好";
        window.location.href = "http://localhost:8080/b.html";    
    }, 3000);
</script>
</head>
<body>
   数据...
</body>

</html>

5、测试

把 a.html 和 b.html 放到 tomcat (端口:8080) 的 webappsROOT 下,c.html 放到另一个 tomcat (端口:9090) 的 webappsROOT 下。

跨域访问方法介绍(4)-

原文链接:https://www.cnblogs.com/wuyongyin/archive/2021/06/20/14857702.html

上一篇:Java各种比较对象的方式的对比总结 下一篇:Java新手教程之ArrayList的基本使用
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

陕ICP备14013131号-3