如何缩放到 iframe 响应中的某些元素？答案

【问题标题】：How to scale to certain element in a iframe responsive?如何缩放到 iframe 响应中的某些元素？
【发布时间】：2017-04-03 10:32:27
【问题描述】：

我尝试了几种方法来缩放到 iframe 中的 HTML 元素，这些元素不在同一个域中打开

它适用于具有变换比例属性的包装 div

<div class="wrapper">
    <iframe class="scaled" src="frame.html" scrolling="no" frameborder="0"></iframe>
</div>
.wrapper {
    position: absolute;
    width:100%;
    height: 100%;
    top: 0px;
    left: 0px;
    overflow: hidden;
    transform: scale(4,33) translateY(-107px) translateX(-240px);
}

iframe.scaled {
    overflow: hidden;
    width: 1920px;
    height: 1080px; 
}

我的问题是如何使这个响应？所有设备（移动设备）上的缩放比例都是相同的，我想我们需要一些 JavaScript 代码来做到这一点？

【问题讨论】：

您想要响应什么，iframe 或 iframe 中的 div？
由于“同源策略”，您无法在 iframe 内执行任何操作
@NeilPatrao 在 iframe 中的内容
最简单的选择是使用 jQuery 来修改 css 属性。但我不确定你为什么要使用变换比例属性。有响应式框架，如引导程序。如果您可以控制 iframe 的内容，请在内部使用响应式框架，这应该会有所帮助。

标签： javascript jquery html css iframe

【解决方案1】：

我认为最好的解决方案是使用纯 HTML。

此代码的目的是将底部填充设置为视频或 iframe 的纵横比。然后 iframe 在宽度和高度上缩放到 100%，完全填满外部容器。外部容器现在可以根据宽度自动调整高度，iframe 也会相应调整。

<div style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
    <iframe style="position:absolute; left:0; top:0; width:100%; height:100%"
        src="https://www.w3schools.com/html/">
    </iframe>
</div>

JsFiddle：

https://jsfiddle.net/4Lmjb3ge/

我希望这能回答你的问题。

【讨论】：