1

我做网站。我的客户登录后，他们看到了他们网站设计的 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 = size 是完美的，当您单击 iframe 浏览器内的链接时，会打开我的 href（太多逻辑...），当您单击 iframe 内而不是链接时，什么也不会发生。

FF = 缩略图比 Chrome 小 4 倍

IE = 缩略图大 4 倍

4

1 回答 1

0

您可以插入一个覆盖整个页面的 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。改变你的需求

于 2013-07-03T21:30:02.767 回答