2015年12月16日 星期三

[Javascript] ShowModalDialog 子視窗關閉母視窗更新(含excel下載功能) for IE

目前手上在寫手上的專案
在deadline那天才想到需要完全相容IE環境...

因此才開始檢查相關的功能
發現一個很麻煩的問題

我的主頁打開後會有個button可以點選明細
明細點開後又有一個自己刻的table,畫面上看起來就是新開小視窗

當我這個table關閉時,明細的畫面應該要重新整理
但好死不死在IE環境下會直接給你強迫新開視窗
根據同事的說法,只要在<head>裡面加上這段就好:

<base target="_self"  />

關於<base>的用法請參考
http://www.wibibi.com/info.php?tid=418



以為這樣就結束了,但好戲還在後頭
因為這個明細頁需要將畫面的Gridview下載為excel
但加上了這段,excel的button會被lock...
於是開始請教google大神,找到的解法通常是這樣子:

增加一個iframe在<body>,本來的<form>下面
<iframe id="download" name="download" height="0px" width="0px"></iframe>

然後新增一個<base>,指向這個iframe(當然,只要是base都要在<head裡面>)
<base target="download"  />



執行後發現
新開視窗問題解決了,excel也可以下載
但發現當我畫的table裡面有個button,會觸發明細form的submit
後端程式事都有執行,但前端的畫面不會重整...
找了好久,後來想到應該是因為<base target="download"  />的時候
他會將本來的form切換到我新建的iframe
所以畫面才會一直停留在本來按下submit的那個狀態,但其實後端視有執行的

於是此問題還是沒解
花了大該一天的時間
參考了這篇文章
http://m.xuehuile.com/blog/a3b5d9e9008b411e8a04429497bb9b7d.html
(在此貼出來只是想表達有點像裡面的感覺,利用js去控制)

調整為當我submit的時候,在將<base>調整就好
簡單說就是利用javascript去控制<base>
但記得不要在<head>設定他的target

程式碼如下:

1.設定<base>的id在<head>  →因為要用js去控制

              <base id="default" />

2.在js新增此function(如果有用jquery可以參考上一個文章的寫法)

  function changeBase() {
            document.getElementById("default").setAttribute('target', '_self');
        }

3.在我要執行form submit,去呼叫changeBase()

var oForm = document.getElementById('Form1');
changeBase();                
oForm.submit();


Note.前面提到的的設定都要拿掉,不需要新增加什麼iframe或是另外設定base


花了我好多時間
只能說前端技術真的好難,還是覺得後端的code比較順眼
紀錄一下