如何使用jQuery获取iframe中的样式?

发布网友发布时间：2024-09-30 22:37

共1个回答

热心网友时间：2024-10-14 11:16

项目中使用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...