js iframe父子页面dom访问需要同源（不允许跨域）

最新推荐文章于 2024-07-05 18:03:34 发布

胖鹅68

最新推荐文章于 2024-07-05 18:03:34 发布

阅读量2.1k

点赞数

分类专栏： Html5、JavaScript、ES6

本文链接：https://blog.csdn.net/hbiao68/article/details/103950334

版权

Html5、JavaScript、ES6 专栏收录该内容

82 篇文章 3 订阅

订阅专栏

文章目录

问题描述

工作中遇到一个场景，用户没有登录，但是要获取用户登录的信息。

解决思路

通过页面JS获取用户的登录账号ID，然后发送给后台，模拟用户已经登录了

解决办法

由于浏览器的安全限制，子页面要访问父页面的DOM 点，一定要两个页面处于同一个服务器中，即，不允许跨域访问。（很容易理解，如果子页面是黑客写的，父页面是攻击目标，那么就可以自己随意处理父页面的逻辑了，很显然是不安全的）

因此，将静态页面必须和客户端（使用iframe引入我开发的页面）保持一致，而后台代码只需要浏览器能够访问到即可，即和客户端的服务器在同一个局域网中。

案例实验

下面写了两个案例

son.html 和 parent.html 在同一个服务器下,son.html 访问parent.html 的 DOM 节点
son.html 和 parent.html 不在同一个服务器下,son.html 访问parent.html 的 DOM 节点

子页面 son.html，访问父页面的DOM 树

<!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>Document</title>
</head>
<body>
    test
</body>
<script>
window.onload = function () {
    debugger
    // var Awin = window.open('','window1');
    var parentWindow = window.parent;
    var pdocument = parentWindow.document
    console.log(pdocument.getElementById("hb"))
}
</script>
</html>

同源策略（parent.html 和 son.html在同一个服务器上）

parent.html和son.html都是在同一个服务器上（live-server）

<!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>Document</title>
</head>
<script>
window.name='window1';
</script>
<body>
    <div id="hb">huangbiao</div>
    <iframe src="./son.html" frameborder="0"></iframe>
</body>
</html>

在这里插入图片描述

不同源（parent.html 和 son.html 不在同一个服务器上）

parent.html 放在tomcat 服务器上，son.html在live-server服务器上

<!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>Document</title>
</head>
<script>
window.name='window1';
</script>
<body>
    <div id="hb">huangbiao</div>
    <iframe src="http://127.0.0.1:5500/son.html" frameborder="0"></iframe>
</body>
</html>