非交互式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或類似的解決方案

回答

相關問題