修改iframes内元素的样式

前言：网页可以使用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节点
一、在当前窗口中获取父级窗口举行样式修改

1. parent //获取父窗口 （等同于window.parent）
2.   .document //获取父级窗口的document文档
3.   .getElementById('box') //获取父级窗口中id为box的DOM元素
4.   .style
5.   .background='red' //修改DOM元素的背景色

复制代码

二、在当前窗口中获取通过iframe为引入的页面(iframe标签的id属性是'li')

1. document.getElementById('li').onload = function(){ //通过inload事件监测iframe的加载
2. document.getElementById('li') //获取到iframe
3. .contentWindow //获取到iframe的window
4. .document //获取到iframe的document
5. .getElementById('xoc') //获取iframe中id=‘xoc’的DOM元素
6. .style
7. .color = 'green'
8. }

复制代码

来源：https://blog.csdn.net/m0_73334325/article/details/127842985
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！