修改iframes内元素的样式

Posted 2023-03-28 Lee_Yu_Fan

前言：网页可以使用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'