P-L-P 小站 • 檢視主題 - [網頁設計] iframe 相關

所有顯示的時間為 UTC + 8 小時

[網頁設計] iframe 相關

第 1 頁 (共 1 頁)

[ 3 篇文章 ]

列印模式	上一個主題 \| 下一個主題

發表人

內容

mimiba

文章主題 : [網頁設計] iframe 相關

發表於 : 2014-02-27, 13:59

註冊時間: 2006-10-31, 14:26
文章: 2152

縮小 iframe 原始頁面大小

1. http://www.webdeveloper.com/forum/showt ... l-browsers

2. http://www.collaboration133.com/how-to- ... fari/2717/

3. http://www.carsonfarmer.com/2012/08/cro ... e-scaling/

小細節

代碼:

Note that if instead of -ms-zoom you use zoom, webkit browsers seem to ‘double scale’ everything, which turned out to be the root of my problem.

--> 解決 chrome 顯示的問題

回頂端

mimiba

文章主題 : Re: [網頁設計]縮小 iframe 原始頁面大小

發表於 : 2014-02-27, 14:46

註冊時間: 2006-10-31, 14:26
文章: 2152

在 iframe 中只顯示一部分的來源網頁

http://stackoverflow.com/questions/1411 ... -an-iframe

範例：引入 bloomberg 的 chart 網頁

代碼:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#my-div
{
    width    : 650px;
    height   : 1000px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -480px;
    left     : -150px;
    width    : 1280px;
    height   : 1000px;
}                
</style>
<body>

<div id="my-div">
<iframe src="http://www.bloomberg.com/quote/VNINDEX:IND/chart" id="my-iframe" scrolling="no"></iframe>
</div>

<body>

回頂端

mimiba

文章主題 : Re: [網頁設計] iframe 相關

發表於 : 2014-02-28, 09:59

註冊時間: 2006-10-31, 14:26
文章: 2152

混合型 iframe ( 縮小 + 擷取任意部分網頁）

代碼:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#my-div
{
    width    : 650px;
    height   : 1000px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -480px;
    left     : -150px;
    width    : 1280px;
    height   : 1000px;
    -ms-zoom: 0.8;
    -moz-transform: scale(0.8);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.8);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.8);
    -webkit-transform-origin: 0 0;
}                
</style>
<body>

<div id="my-div">
<iframe src="http://www.bloomberg.com/quote/VNINDEX:IND/chart" id="my-iframe" scrolling="no"></iframe>
</div>

<body>

回頂端

第 1 頁 (共 1 頁)

[ 3 篇文章 ]

討論區首頁 » 百川匯流 » 電腦相關

所有顯示的時間為 UTC + 8 小時

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案