覆盖动态 iframe 的样式答案

【问题标题】：Override style of dynamic iframe覆盖动态 iframe 的样式
【发布时间】：2015-06-14 22:38:49
【问题描述】：

我在我的网页中使用了一个 3rd-party javascript 库（我将它称为“jslib”），当点击某个链接时，它会动态生成并在我的页面上显示一个 iframe。我正在尝试覆盖 iframe 上的某些样式。在某些情况下我可以做到，但在一种情况下我不能。看看：

请注意，我的 border 样式（下方，在 styles.css 第 22 行内）被 jslib 的 border 样式“0”覆盖。

这里是 jslib 参考：

<script type="text/javascript" src="https://www.paypalobjects.com/js/external/dg.js"></script>

我尝试了以下方法：

如上所示，我将样式放在了我的 css 文件中。
我将我的 css 文件放在页面中 jslib 的引用下方，希望覆盖这些样式。
我将样式直接放在我的 html 页面中的 <style></style> 块中。

jslib 没有 css 文件，也没有内联样式。所有样式都是从我在页面中引用的 js 文件中构建的。

有没有办法用纯 css 以某种方式覆盖该边框样式？如果没有，jquery 一定有办法。但是如果我用 jquery 尝试它，我不知道如何连接到 jslib。或者，如果我尝试挂钩触发所有内容的链接单击，jquery 可能会在创建 iframe 之前尝试应用样式等。不确定在哪里挂钩、如何挂钩以及对象创建的时间。

执行此操作的最佳方法是什么？普通的旧 CSS 会很棒，但如果不可能，欢迎使用 jquery 样式。

【问题讨论】：

如果 iframe 不是同一个域，则无法访问其中的任何内容，只能影响外部 iframe 元素本身
但你总是可以为它的“外部”设置样式
对，使用 !important 覆盖 iframe 周围的边框

标签： javascript jquery css

【解决方案1】：

试试这个。

border: 2px solid #666 !important;

重要标志将其优先于所有其他定义，但其他 !important 定义除外。

【讨论】：

更多关于选择器优先级的细节：developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Jaw.sh，有效，但有副作用。它强制边框显示在 iframe 周围，而第 3 方内容仍加载到 iframe 中，这是我不想要的。在尝试您的建议之前，我不知道会发生这种情况。在流程的最后一步（在 iframe 内部进行），第 3 方库将 iframe 的内容重定向到我的内容（我控制的单独网页）。在这一步，我希望调用我的边框样式（一旦我的页面加载到 iframe 中）。有什么办法可以将这种风格的应用推迟到最后一步？
尝试使用与您的库相同的选择器：#PPDGFrame .panel iframe。或者如果仍然没有，则可能使用了一种ready 类。
@SweatCoder @Gael 说了什么。如果您的 iframe 包含第 3 方内容，则由于跨域脚本规则，您无法知道该内容是否已加载。如果它托管在您的服务器上，并且该库提供了对 iframe 加载的反应，您可以使用它。您也可以尝试添加[src] 属性选择器，例如this example。这在指定源之前不会添加边框，但会在内容完全加载之前添加它。

【解决方案2】：

我会选择更好的指定选择器，例如：

body #PPDGFrame .panel iframe {
   /* Your style here */
   border: 2px solid #666;
}

我宁愿避免使用重要，你最终会陷入重要的地狱，这是由于selector priorities

那么 选择器优先级是什么意思 - 让我们举个小例子：

<html>
    <body>
        <div id="wrap" class="wrap">
            <div class="element"></div>
        </div>
    </body>
</html>

如果你有上面的HTML，那么你需要选择“div.element”你可以很简单。

.element { /* some style */ }

paypal 是如何做到的，他们注入了一个内联样式表，该样式表的 id 选择器比类选择器强

#wrap .element { /* some style */ }

那么如何覆盖这个，你简单地做一个“更强”的选择器

body #wrap .element { /* some style */ }

我更喜欢在我的类中使用 bem 语法来使用“最轻量版本的选择器”，阅读更多关于 BEM 语法的信息 here

如果您需要在 iframe 中的内容加载后做一些事情，您需要检查您正在使用的“jslib”中的回调，当它返回时您会做一些事情

为什么不使用 !important

在我看来，我更喜欢将它用作调试器工具而不是生产工具，我很少使用它来覆盖一些 javascript 设置样式，当您可以设置一个可以保存样式的类时，我也认为这是错误的.

如果你最终有 5 或 10 个带有 !important 的类似选择器，它就会开始变得混乱。

【讨论】：

Simon，你的方法有效，但我不明白它是如何在不使用“！important”的情况下进行覆盖的。似乎最初的第 3 方风格会像我最初发生的那样优先。（副作用仍然存在，但也许我必须为此创建一个新问题。）
@SweatCoder 基本上只是为了制作一个更强大或更指定的选择器 - 我将编辑我的答案并详细说明
@SweatCoder 他的解决方案增加了它的权重。选择器越具体，它的优先级就越高。通过在 jslib 使用的完全相同的选择器之前添加body，它增加了它的权重，使其变得更重要。 !important 通过异常简单粗暴地使它变得更重要。
Jaw.sh，感谢您的详细说明，现在对我来说很有意义。当然，谢谢西蒙。