/**
* 父页面获取 iframe window 对象
*/
const iframeWin = document.getElementById("iframe").contentWindow;
const iframeWin = document.getElementsByTagName('iframe')[0].contentWindow;
/**
* 父页面获取 iframe document 对象
*/
const iframeDoc = iframeWin.document;
/**
* 父页面获取 iframe body 对象
*/
const iframeBody = iframeDoc.body;
/**
* 父页面调用 iframe 方法
*/
iframeWin.method(); // method 是 iframe 的一个方法名
/**
* iframe 获取父页面 window 对象
*/
const parentWin = window.parent;
/**
* iframe 获取父页面 document 对象
*/
const parentDoc = window.parent.document;
/**
* iframe 获取父页面 window 对象
*/
const parentBody = window.parent.body;
/**
* iframe 调用父页面的方法
*/
window.parent.method(); // method 是父页面的方法
window.postMessage
是允许两个(跨域)窗口或 iframes 发送数据信息。像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。更多信息查看 window.postMessage。
发送消息:
/**
* iframe 页面发送消息
*/
const message = 'Hello!'; // 发送到其他 window的数据
const domain = '*'; // 指定哪些窗口能接收到消息事件,‘*’表示无限制
window.postMessage(message, domain);
接收消息:
/**
* data: 发送方窗口发送的数据
* origin: 发送方窗口的 origin
* source: 发送消息的窗口对象的引用
*/
window.addEventListener('message', (event) => {
const { data, origin, source } = event
console.log(event)
}, false);
背景
A, B, C, D 是四个页面,B 是 A 的 iframe,C 是 B 的 iframe,D 是 C 的 iframe。
问题
在 D 中跳转页面
跳转
使用 window.open()
是类似的。
/**
* 在本页面跳转(D 页面跳转)
*/
window.location.href = '';
/**
* 在上一层页面跳转(C 页面跳转)
*/
window.parent.location.href = '';
/**
* 在上上一层页面跳转(B 页面跳转)
*/
window.parent.parent.location.href = '';
/**
* 在最外层页面跳转(A 页面跳转)
*/
window.top.location.href = '';
链接或form
D 页面中有form
/**
* form 提交后,在 D 页面跳转
*/
<form></form>
/**
* form 提交后,弹出新页面
*/
<form target="_blank"></form>
/**
* form提交后,在 C 页面跳转
*/
<form target="_parent"></form>
/**
* form提交后,在 A 页面跳转
*/
<form target="_top"></form>
刷新
/**
* C 页面刷新
*/
window.parent.location.reload();
/**
* A 页面刷新
*/
window.top.location.reload();
以前做pc端,也会遇到兼容性的问题,不过说实话,脑海里全是ie的问题,并没有什...
Dreamweaver设计网页的时候,想要撤销几个操作,这就是返回步数,该怎么设置返回...
以 图片所示的效果为例,显然我们不仅要使下一步文本水平居中,还要垂直居中,此...
简介: 视频云赋能行业革新 5 月 28 日 - 29 日,2021 阿里云峰会在北京国家会议...
文字阴影 text-shadow: 水平偏移 垂直偏移 模糊 颜色 兼容性:IE10+ !DOCTYPE ht...
交互图像在网页设计中经常遇到,所谓交互图像,是指当鼠标经过图像时,原始图像...
Prosus 表示以 18 亿美元的交易,收购了全球知名的开发者技术问答社区 Stack Ove...
先点赞再看,养成好习惯 SPI 全称为 Service Provider Interface,是一种服务发...
video对象 兼容性写法 video controls source src=data/demo.ovg source src=dat...
用了layui框架 1.home.html主界面: !DOCTYPE htmlhtml head meta charset=UTF-8...