window.name + iframe前端跨域

最新推荐文章于 2025-08-01 01:18:43 发布

原创最新推荐文章于 2025-08-01 01:18:43 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js #跨域 #window.name #iframe

js 同时被 2 个专栏收录

5 篇文章

订阅专栏

跨域

4 篇文章

订阅专栏

本文介绍了一种使用window.name属性实现跨域数据传输的方法。通过在iframe中设置window.name为JSON字符串化的对象，主页面可以读取并解析这个值，从而实现不同域名间的数据传递。

概述：

window.name这个属性不是一个简单的全局属性 --- 只要在一个window下，无论url怎么变化，只要设置好了window.name，那么后续就一直都不会改变，同理，在iframe中，即使url在变化，iframe中的window.name也是一个固定的值，利用这个，我们就可以实现跨域了

代码实例：

test1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
</head>
<body>
  <h2>test1页面</h2>
  <iframe src="http://192.168.1.10/php_demo/test2.html" frameborder="1"></iframe>
  <script>
    var ifr = document.querySelector('iframe')
    ifr.style.display = 'none'
    var flag = 0;
    ifr.onload = function () {
        console.log('跨域获取数据', ifr.contentWindow.name);
        ifr.contentWindow.close();
    }
  </script>
</body>
</html>

test2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test2</title>
</head>
<body>
  <h2>test2页面</h2>
  <script>
    var person = {
      name: 'wayne zhu',
      age: 22,
      school: 'xjtu'
    }
    window.name = JSON.stringify(person)
  </script>
</body>
</html>

使用浏览器访问test1.html:http://192.168.1.10/php_demo/test1.html

运行截图：