您现在的位置是:首页 > Javascript
当前栏目
修改iframes内元素的样式
2023-03-31 10:40:42 时间
前言:网页可以使用iframe元素嵌入其他页面,因此一个页面之中会存在多个窗口;在子页面中,又可以嵌入别的页面,从而形成多级窗口。 iframe元素遵守同源策略,只有当父页面与框架页面来自同一个域名,两者之间才可以通过脚本通信。
window.top:顶级窗口
window.parent:父级窗口
window.self:当前窗口
1、对于iframe嵌入的窗口,通过document.getElementById方法可以拿到该窗口的DOM节点,然后使用content.Window属性获得iframe节点包含的window对象,使用contentDocument属性获得包含的document对象
2、在iframe窗口内部,使用window.parent引用父窗口。如果没有父窗口则返回自身
3、iframe嵌入窗口的window对象,存在一个frameElement属性,返回它在父窗口中的DOM节点
一、在当前窗口中获取父级窗口进行样式修改
parent //获取父窗口 (等同于window.parent)
.document //获取父级窗口的document文档
.getElementById('box') //获取父级窗口中id为box的DOM元素
.style
.background='red' //修改DOM元素的背景色
二、在当前窗口中获取通过iframe为引入的页面(iframe标签的id属性是'li')
document.getElementById('li').onload = function(){ //通过inload事件监测iframe的加载
document.getElementById('li') //获取到iframe
.contentWindow //获取到iframe的window
.document //获取到iframe的document
.getElementById('xoc') //获取iframe中id=‘xoc’的DOM元素
.style
.color = 'green'
}
相关文章
- 前端面试 【CSS】— CSS 如何实现“品”字布局?
- 前端面试 【CSS】— CSS 如何实现“圣杯”布局?
- 前端面试 【CSS】— CSS如何实现双飞翼布局?
- 前端面试 【CSS】— 什么是BFC?它的触发条件有哪些?
- 前端面试 【CSS】— BFC的渲染规则有哪些?有哪些应用场景?
- 前端面试 【CSS】— 利用CSS画一个聊天消息对话框
- 前端面试 【CSS】— 如何用CSS画一个平行四边形
- 前端面试 【CSS】— 如何用CSS画一个五角星
- 前端面试 【JavaScript】— JS原始数据类型有哪些?引用数据类型有哪些?
- 前端面试 【JavaScript】— 说出下面代码运行的结果,解释其原因
- 前端面试 【JavaScript】— ‘1‘.toString()为什么可以调用?
- 前端面试 【JavaScript】— 0.1+0.2为什么不等于0.3?如何实现等于0.3?
- 前端面试 【JavaScript】— 什么是BigInt? 谈谈你对它的认识
- FinClip小课堂|H5 和小程序到底哪个好?
- 从零开始摸索VUE,配合Golang搭建导航网站(十六.CSS动画初探)
- Vue原理:渲染流程入口
- 如何在 JavaScript 中操作二维数组
- JS:数学计算Math相关四舍五入、向上取整、向下取整、取余、保留小数
- h5跳小程序--非微信环境如何跳转/打开小程序【URL Scheme】
- 【快速入门Vue系列】多元素过渡、列表过渡、复用过渡、异步组件你会几个?