Question

我做网站。我的客户登录后会看到他们网站设计的5个想法 - 不同的布局，颜色等。

现在我向他们展示了5个版画屏幕，由我完成并由我上传。每个img链接到不同的建设中网站。

我想要的是每次更改内容时都不需要手动更改打印屏幕。

我尝试了iFrame解决方案，但它们是互动的。

您有什么想法是最好的方法吗？

编辑：

我有（解决方法）解决方案，但仅适用于Chrome。

<a target="_parent" href="http://url.com">
<div>
<iframe id="iframe" src="http://url.com" width="300px" height="300"></iframe>
</div>
</a>

和一些CSS缩小并使网站看起来像缩略图：

#iframe{
zoom: 4.0;
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
}

Chrome =尺寸非常完美，当您点击iframe浏览器中的链接打开我的href（这么多逻辑...）时，当您点击内部iframe而不是链接时，没有任何反应。

FF =缩略图比Chrome小4倍

IE =缩略图4倍

Answer 1

您可以插入一个覆盖整个页面的div容器，这样您的用户就无法点击任何内容，但是在div上。

<div style="position:fixed;width:100%;height:100%;"></div>

完整代码可能如下所示：

<html>
    <body>
        <div style="position:fixed;width:100%;height:100%;"></div>
        <iframe src="http://www.http://stackoverflow.com" width="100%" height="300" ></iframe>
   </body>
</html>

编辑：您可以尝试这样做：

    <div id="myiframes">
        <div style="position: relative; width: 300px; height: 300px; display: inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
        <div style="position: relative; width: 300px; height: 300px;display:inline-block;"></div>
        <iframe src="http://www.w3schools.com" width="300px" height="300" style="margin-left:-300px;"></iframe>
</div>

通过添加-300px的边距，基本上将每个iframe移动到div之外;到每个iframe。改变您的需求

非交互式iframe或类似解决方案

1 个答案: