如何更改 iframe 中图像的样式

Question

我用 Vaadin 7 生成了一个 iframe，结果是：

<div class="zoom-to-fit" style="width: 1200px; height: 900px;">
    <iframe src="http://localhost:8090/image.png" frameborder="0" width="100%" height="100%">
    </iframe>
</div>

我可以向 iframe 添加样式 class zoom-to-fit，但 iframe 被包裹在 div.

中

我正在尝试将图片拉伸到 iframe，但它不起作用。

我尝试了以下方法：

.zoom-to-fit {
    width: 100%;
    height: 100%;
}

.zoom-to-fit {
    background-size: 100% 100%;
}

.zoom-to-fit > html > body > img {
    width: 100%;
    height: 100%;
}

但它们不起作用。

我添加了最后一个，因为 html 开发者工具中的代码如下所示：

我想我无法修改 iframe 中的任何样式...但是我如何调整图像大小？

我知道如果我转到图像并添加第一个样式（宽度和高度为 100% 有效），但我只能使用我正在使用的 Vaadin 框架添加或删除样式。

Answer 1

我从论坛上看到的 post 可能有帮助： https://vaadin.com/forum/thread/393458/embedded-component-image-and-setwidth-resizing-both-component-and-image

还有另一个 SO 问题：

Answer 2

因此，无法使用 css 更改样式，因此解决方案有点令人讨厌（或不太好）。

CSS 不知道 iframe 内部的结构，所以这就是为什么它没有像我想要的那样被应用。但由于 bot 站点和 iframe 的内容来自同一来源，javascript 可以安全使用（也是使其工作的唯一方法）。

幸运的是 vaadin 中有一个工具可以安全地执行 javascript。所以我可以获得 iframe 标签，然后是 img 标签。

import com.vaadin.ui.JavaScript;

JavaScript.getCurrent().execute(
    "document.getElementsByTagName('iframe')[1].contentDocument.body.children[0].style=" 
    + "'width: 100%; height: 100%;'");

这是原版 javascript，因此它应该适用于大多数浏览器。

如何更改 iframe 中图像的样式

How to change the style of an image inside an iframe

html

css

iframe

vaadin

vaadin7