如何解决如何更改 iframe 内图像的样式
我用 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 框架添加或删除样式。
解决方法
我从一个可能有帮助的论坛帖子中看到了这一点: https://vaadin.com/forum/thread/393458/embedded-component-image-and-setwidth-resizing-both-component-and-image
还有这个来自另一个SO问题: Resizing Vaadin Image
,因此,无法通过 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,所以它应该适用于大多数浏览器。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。