javascript - 使 Facebook 页面插件响应(到处搜索，找不到解决方案)

Question

Facebook 似乎决定将点赞框更改为页面插件，并将最大尺寸限制为 500px。

包含脚本的页面:http://akecheta.com/facebooklikeplugin-responsive.html

我的问题就是那个，我不能在赞框上使用全宽布局。到目前为止，这是我尝试过的:

 /* Fits the like box to the parent div, creating a fluid layout */
#u_0_0 > div {
  width: 100% !important;
}
/* Fits the background image to the like box */
.uiScaledImageContainer._2zfr {
  width: 100% !important;
}

/* Modifies the first background color of the fans part */
._h7l {
  background: #EE6C00 !important;
}
/* Modifies the second background color of the fans part */
._h7n {
  background: transparent !important;
}
/* Modifies the color of the text above the fans thumbnails */
/* Modifies the color of the text above the fans thumbnails */
._50f3 {
  font-size: 150%;
  line-height: 25px;
  color: #FFFFFF !important;
}

它在运行时运行得非常好，但后来我将这些更改保存到我的样式表中，没有任何反应。

当页面加载时所有的类都改变了，但是 id #u_0_0 仍然保持不变。就好像它不存在一样。

现在我正在想办法解决这个问题，因为我需要使用具有全宽布局的页面插件。

Answer 1

当您在 devtools 中即时执行 CSS 而不是将其放入样式表时，CSS 起作用的原因是加载插件的 iframe 无法通过其外部的 CSS 设置样式。设置 iframe 样式的唯一方法是从 iframe 本身内部。由于您将其作为第三方插件加载，因此您需要寻找一种方法在完全加载后将样式动态注入(inject) iframe。

请参阅此问题以了解您正在尝试做的事情的更多方向:Append a stylesheet to an iframe with jQuery