文章目录
需求描述
在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？
开始上手
上代码
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./common.css" />
<title>Document</title>
</head>
<body>
<h2>父页面</h2>
<button onclick="doAction()">❤ 点击触发父页面的事件 ❤</button>
<br />
<iframe
id="iframeContainer"
name="iframePage"
src="./iframe-page.html"
frameborder="0"
scrolling="no"
>
</iframe>
<script>
const doAction = () => {
console.log("父页面的事件");
};
</script>
</body>
</html>
iframe页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
queryName="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="stylesheet" type="text/css" href="./common.css" />
<title>Document</title>
</head>
<body style="background-color: black">
<h2>iframe页面</h2>
<button onclick="iframeDoAction()">❤ 点击触发iframe页面的事件 ❤</button>
<script>
const iframeDoAction = () => {
console.log("iframe页面的事件：iframeDoAction");
};
</script>
</body>
</html>
父向子传值
方法一：通过URL传参
父页面添加代码
// 页面初始化完成自动传递数据给子页面 方案一：--start
const iframeDom = document.getElementById("iframeContainer");
let url = iframeDom.src + "?id=1&name=糖豆豆"; //拼接上需要传递的参数
document.getElementById("iframeContainer").src = url;
// 页面初始化完成自动传递数据给子页面 方案一：--end
iframe页面添加代码
// 页面初始化完成自动传递数据给子页面 方案一：--start
function getUrlQuery(queryName) {
var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return r[2];
return null;
}
window.onload = function () {
console.log("iframe页面的事件：window.onload");
console.log(getUrlQuery("id"), decodeURIComponent(getUrlQuery("name")));
};
// 页面初始化完成自动传递数据给子页面 方案一：--end
方法二：通过window.postMessage()方法
父页面添加代码
// 父页面传递数据给子页面：--start
const doAction = () => {
console.log("父页面的事件");
let send = document.getElementById("iframeContainer").contentWindow;
send.postMessage("我是父页面发的数据", "*");
};
// 父页面传递数据给子页面：--end
iframe页面添加代码
// 父页面传递数据给子页面：--start
const iframeReceiveData = (data) => {
console.log("iframe页面的事件：iframeReceiveData");
console.log(data)
};
window.onload = function(){
window.addEventListener('message',function(e){
iframeReceiveData(e.data)
})
}
// 父页面传递数据给子页面：--end
注意事项
postMessage方法有三个参数
- 参数1 ：发送的数据；
- 参数2 ：哪些窗口能收到消息事件，用来指定接收消息事件的窗口，其值可以是一个URI或者字符串"*"（表示无限制）举个栗子：window.postMessage(‘hello!’, ‘http://127.0.0.1:5005’);
- 参数3：是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
接收postMessage方的怎么用呢？
- e.source --消息源，消息发送的窗口/iframe
- e.origin – 消息源的URI,用来验证数据源
- e.data – 数据
子向父传值
方法一：通过通过全局变量方式处理
父页面添加代码
window.onload = function(){
console.log(document.getElementById('iframeContainer').contentWindow.commonData4)
console.log(document.getElementById('iframeContainer').contentWindow.commonData5)
console.log(document.getElementById('iframeContainer').contentWindow.commonData6)
// 调用方法
document.getElementById('iframeContainer').contentWindow.commonData6()
}
iframe页面添加代码
var commonData4 = { name: "xiaojin", id: 1 };
var commonData5 = 'xiaojin'
var commonData6 = ()=>{console.log(123)}
一起来看一下效果吧
方法二：通过通过window.parent.postMessage()方法
父页面添加代码
// 子页面传输数据给父页面 方案二： ---start
window.onload = function(){
window.addEventListener('message',function(e){
console.log(e.data)
})
// 子页面传输数据给父页面 方案二： ---end
iframe页面添加代码
// 子页面传输数据给父页面 方案二： ---start
const iframeDoAction = () => {
console.log("点击触发iframe页面的事件：iframeDoAction");
window.parent.postMessage("I am xiaojin", "*");
};
// 子页面传输数据给父页面 方案二： ---end
一起来看一下效果吧~
待继续补充
- 今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
