修改iframes内元素的样式_代码007(未授权)

本文介绍: 在iframe 引入的页面中修改父级页面的样式，在父级页面中修改 iframe 页面的样式

前言：网页可以使用 iframe 元素嵌入其他页面，因此一个页面之中会存在多个窗口；在子页面中，又可以嵌入别的页面，从而形成多级窗口。 iframe 元素遵守同源策略，只有当父页面与框架页面来自同一个域名，两者之间才可以通过脚本通信。

1、对于iframe嵌入的窗口，通过document.getElem entById方法可以拿到该窗口的DOM节点，然后使用content.Win dow属性获得iframe 节点包含的win dow对象，使用contentDocu m ent属性获得包含的document 对象

2、在iframe窗口内部，使用win dow.parent引用父窗口。如果没有父窗口则返回自身

3、iframe嵌入窗口的win dow对象，存在一个frameElem ent 属性，返回它在父窗口中的DOM节点

一、在当前窗口中获取父级窗口进行样式修改

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

二、在当前窗口中获取通过 iframe为引入的页面(i frame 标签的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'
 }