使用 JQuery 修改 iFrame 中内容的 CSS

Posted 2023-05-09

【中文标题】使用 JQuery 修改 iFrame 中内容的 CSS

【英文标题】：Use JQuery to modify CSS for content in an iFrame

【发布时间】：2015-09-13 20:11:41

【问题描述】：

我的网站上有一个 Twitter 小部件（一个嵌入 iFrame 的 javascript 小部件）。以前我用过

iframe[id^='twitter-widget-'] width:100% !important;

将小部件宽度更改为 100%，而不是默认的 520 像素。直到昨天它工作得很好。不知何故，iframe 上的 CSS 设置不再起作用。我检查了 iFrame 源代码，似乎 Twiiter 添加了这个

.timeline 
  max-width: 520px;
 

因为这个iframe来自twitter，所以我没办法用css来修改.timeline。我尝试使用 Jquery/javascript：

$("#twitter-widget-0").contents().find(".timeline").css("max-width","100%");

但它似乎只适用于控制台。我将这行 JavaScript 放在 php 模板文件中，但它不起作用。我尝试过 body onLoad、window onload 和 document onload，但都没有。我还将这个 javascript 放在了我的模板文件的末尾，它也没有。

如何解决这个问题？

谢谢，

【参考方案1】：

您不能使用 JavaScript 对任何跨域 iFrame 进行任何 DOM 操作！如果 iFrame 属于同一个域，那么只有您能够做到这一点！

查看这些相关问题

Can I apply CSS to the elements within an iframe? How to apply CSS to iframe?

简而言之，没有。您不能将 CSS 应用于在 iframe 中加载的 html，除非您可以控制在 iframe 中加载的页面。

【讨论】：

你的意思是为什么我们仍然可以看到控制台输出，对吧？所以对于这个问题，控制台只是显示内容和/或输出的一种方式，不需要任何输入或依赖！就像 DOM 一样，您也无法访问 iFrame 的功能。