使用JQuery可以修改iFrame中内容的CSS

Question

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

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

将小部件宽度更改为100%，而不是默认的520px。直到昨天它还运行得很好。不知怎么的，iframe上的CSS设置已经不起作用了。我检查了iFrame的源代码，看起来Twiiter添加了这个

.timeline {
  max-width: 520px;
 }

因为这个iframe来自twitter，所以我无法使用css来修改.timeline

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

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

如何解决这个问题？

谢谢，

Answer 1

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

查看这些相关问题

1. 我可以将CSS应用于iframe中的元素吗
2. 如何将CSS应用于iframe

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