使用 JQuery 修改 iFrame 中内容的 CSS

Question

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

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 和 none 作品。我也把这个 javascript 放在我的模板文件的末尾，但它也没有。

如何解决这个问题？

谢谢，

Answer 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 中加载的页面。

使用 JQuery 修改 iFrame 中内容的 CSS

Use JQuery to modify CSS for content in an iFrame

css

iframe

jquery

cross-domain