修改页面内引入的iframe页面内部元素的样式

如题所述

项目中使用iframe标签引入外部页面时,若需修改iframe内元素样式,需通过JavaScript进行操作,因为父页面的CSS无法影响到iframe内的样式。

为此,开发者可利用iframe的onload事件来监测其加载完成状态。一旦iframe加载完毕,可利用DOM元素的contentWindow属性获取iframe的window对象,然后通过window的document属性访问iframe的document,从而获取和操作其内部元素。

为简化代码,推荐使用jQuery。只需注意将DOM元素转换为jQuery元素即可。

假设parent.html和sun.html处于同一目录下。

在parent.html中,编写代码监测iframe加载完成,并利用jQuery获取并修改sun.html中的样式。

sun.html代码则包含需修改样式的元素。

预期效果是,两行h3标签在父页面显示为yellowgreen,通过js将其加载到iframe页面中的h3元素修改为orange颜色。这时,父页面的样式(yellowgreen)不会影响到iframe内的元素。

使用onload事件要求在服务器环境中打开页面。若需快速搭建前端环境,参考:zhuanlan.zhihu.com/p/30...
温馨提示:答案为网友推荐,仅供参考
相似回答
大家正在搜