在桌面视图中的 iframe 中加载网站答案

【问题标题】：Load a website in iframe in desktop view在桌面视图中的 iframe 中加载网站
【发布时间】：2015-04-20 15:30:13
【问题描述】：

我正在预览我正在后端处理的特定网站。

<div class="tab-pane" id="preview_site">
                    <iframe id="site_previewer" src="path/to/website" style="width:100%;height:600px;"></iframe>
                </div>

这是 iframe。问题是在选项卡视图而不是桌面视图中加载网站。使用当前可用的宽度，我想在桌面视图中加载网站。使用宽度进行操作可以完成工作，但 iframe 也会超出浏览器窗口。我该怎么做？

【问题讨论】：

如果您从要显示 iframe 的同一域加载框架内容，请查看此内容。我正在使用它，它工作得非常好...github.com/davidjbradshaw/iframe-resizer
你可能想看看这个：stackoverflow.com/questions/166160/…
@BabakT：问题出在我将宽度更改为 1280 像素时。框架离开指定的容器。并且容器的宽度是960px。
我从你的问题中明白了你的意思，试着缩小内容大小，这样你就会有更小的宽度尺寸的预期内容（桌面视图），这将适合你有限的 960 像素大小。

标签： javascript jquery html css iframe

【解决方案1】：

这就是我得到解决方案的方式

<div class="tab-pane" id="preview_site">
                    <div class="preview_wrap">
                        <iframe id="site_previewer" class="frame_wrap" src="path/to/website/" ></iframe>
                    </div>
                </div>
<style type="text/css">
    .preview_wrap {
    width: 100%;
    height: 800px;
    padding: 0;
    overflow: hidden;
}
.frame_wrap {
    width: 1280px;
    height: 786px;
    border: 0;
    -ms-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    transform: scale(0.75);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
</style>

【讨论】：