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

我做网站。我的客户登录后，他们看到了他们网站设计的5个想法 - 不同的布局，颜色等。非交互式iframe或类似的解决方案

现在我向他们展示5个printscreens，由我完成并由我上传。每个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; 
}

铬=大小是完美的，当你点击链接里面的iframe浏览器中打开我的href（这么多的逻辑.. ），当你点击内部iframe而不是链接时，什么都不会发生。

FF =缩略图比在Chrome

IE =缩略图大4倍

来源

2013-07-03 pp_1

立即列出网站上的所有5张图片？ –

是的，但没有必要。 –

-1

你可以插入div容器，它涵盖了整个页面，因此用户无法点击任何东西小了4倍，但在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>

基本上移动每个IFRAME超越DIV，藉由将边缘-300px;到每个iframe。更改为您的需求

来源

2013-07-03 21:30:02 isset

问题是我想要互动页面的其余部分。我试图用div覆盖iframe，但没有运气。 –

@ pp_1我已经添加了一些代码给我的回复希望它可以帮助 – isset

不起作用。由于某种原因，iframe更重要。 Div onclick =一些JS也不起作用。 –

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

回答

相关问题