|
|
日前因為工作需要,將網頁內容放大後,再經由框架 (iframe) 再將其縮小來顯示,
問題來了,框架內的元件 (如:Checkbox) 卻不乖乖動作!
從2014/11/27日更新 Chrome 瀏覽器的版本至 39.0.2171.71 m 後就出現此一問題,
而 Chrome 瀏覽器的先前版本或 IE (Internet explorer) 並沒有此一問題.
廢話不多說,先上範例:- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Bug fixes</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{overflow:hidden;}
- </style>
- </head>
- <body>
- <iframe id="f" src="http://jsfiddle.net/leaverou/zBuyN/" style="-ms-transform:scale(0.4,0.4);-ms-transform-origin:100% 100%;-webkit-transform: scale(0.4);-webkit-transform-origin:100% 100%;margin-top:-798px;margin-left:-540px;" width="900" height="1330" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
- </iframe>
- </body>
- </html>
如果你 Chrome 瀏覽器的版本是 39.0.2171.71 m , 39.0.2171.95 m 將會發現 Checkbox 的動作異常!
可以從底下的連結點入操作看看:
http://hsw00.com/x/test1.html
解決辦法如下:
利用 Javascript 將框架畫面不斷更新,也不囉嗦,直接上範例:- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Bug fixes</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- body{overflow:hidden;}
- </style>
- </head>
- <body>
- <iframe id="f" src="http://jsfiddle.net/leaverou/zBuyN/" style="-ms-transform:scale(0.4,0.4);-ms-transform-origin:100% 100%;-webkit-transform: scale(0.4);-webkit-transform-origin:100% 100%;margin-top:-798px;margin-left:-540px;" width="900" height="1330" frameborder="0" marginwidth="0" marginheight="0" scrolling="no">
- </iframe>
- <script>
- // 底下這一段 Javascript 程式在修復新版 Chrome 瀏覽器的畫面更新問題
- // 經測試 版本 39.0.2171.71 m , 版本 39.0.2171.95 m 皆有問題
- window.setInterval(function (){
- document.getElementById('f').style.display='none'; // 關閉畫面
- document.getElementById('f').offsetHeight; // 自動調整高度
- document.getElementById('f').style.display=''; // 開啟畫面
- },100); // 每100ms自動更新畫面一次,可自行調整
- </script>
- </body>
- </html>
範例內已有詳細說明,可以從底下的連結點入操作看看修復後的效果:
http://hsw00.com/x/test2.html
可以發現 Checkbox 乖乖聽話了!
相信 Google 應該會解決掉此問題,但在問題還沒解決掉前,也只能先暫時這樣處理了!
若有相關問題,也歡迎跟帖討論.
|
+1
1
[ 發帖際遇]：hsw 樂於助人，獎勵 84 盆  貢獻. 鮮花雞蛋雨中荷 在2014-12-12 01:06 送朵鮮花 並說：我非常同意你的分享，送朵鮮花鼓勵一下
|
威望
金錢
體力
窺視卡
雷達卡
鮮花(
雞蛋(
發表於 2014-12-10 15:13:37
收藏
分享
淘帖
頂
踩
分享
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
千斤頂
顯身卡
窺視卡
雷達卡
[信息未更新]
發表於 2014-12-12 01:05:34
窺視卡
雷達卡
發表於 2016-2-5 17:34:59
