如何更改 iframe 内图像的样式答案

【问题标题】：How to change the style of an image inside an iframe如何更改 iframe 内图像的样式
【发布时间】：2021-04-29 12:46:13
【问题描述】：

我用 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 中添加一个样式类 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 框架添加或删除样式。

【问题讨论】：

stackoverflow.com/questions/217776/how-to-apply-css-to-iframe 和 stackoverflow.com/questions/583753/…
@ShahryarMohajer 是的，我不太喜欢它，但这里唯一的解决方案是使用 javascript

标签： html css iframe vaadin vaadin7

【解决方案1】：

我从一个可能有帮助的论坛帖子中看到了这一点： https://vaadin.com/forum/thread/393458/embedded-component-image-and-setwidth-resizing-both-component-and-image

还有一个来自另一个 SO 问题的问题： Resizing Vaadin Image

【讨论】：

谢谢，但这并不能解决我的问题，因为我的主要问题是访问 iframe 内的图像。

【解决方案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%;'");

这是 vanilla javascript，因此它应该可以在大多数浏览器中使用。

【讨论】：