2012年12月21日 星期五

解決IE showModelDialog的視窗size問題

開發環境

Win 7 + IE 10 Release Preview
IE版本
IE版本

問題描述

這次的問題是在 IE裡使用window.showModalDialog開啟視窗,而此Dialog視窗中有使用Frameset,Frameset是連到另一頁,所以總共有3頁。

  1. index.html 首頁
  2. dialog.html 彈出的網頁
  3. ocx1.html 嵌入在dialog裡的網頁


彈出視窗Size不正確
彈出視窗Size不正確

dialog.html程式碼
dialog.html程式碼
從上圖看,dialogWidth及dialogheight雖然有設定,但是彈出的視窗Size都沒變。

解法方式

修改彈出視窗dialog.html的Frmaeset改為iframe的寫法。

原來的 dialog.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
   <frameset id="frameset1" rows="100%" >
    <frame id="input" src="ocx1.html" >
 </frameset>
</html>

修改後的 dialog.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <iframe src="ocx1.html" id="f1" style="width: 100%; height: 390px; border: 0px;">
    </iframe>
</body>
</html>
成功彈出正確的Size
成功彈出正確的Size

心得

基本上這應該是IE的bug,我在IE 9, IE 10都有遇到過這種情形,另一種消極解法是使用IE相容性檢視,但iframe可以有body的tag,而且好像外面主流還是用iframe比較多,提供您參考。

沒有留言:

張貼留言