讓Colorbox也支援iframe Post

2013-07-05

4724
0

前言

最近有一個詭異的需求,這個需求就是把網頁上所有以Get方法取得網頁or資料全部都替換成Post。而當初為了讓跳出視窗好看一點而使用了ColorBox,而ColorBox本身具有在網頁上鑲嵌iframe然後顯示指定頁面在iframe中,但是一般來說iframe去取得網頁時大多採用Get方法去取得,鮮少會有需要要使用到Post來取得網頁,而好巧不巧剛好被我遇上了。

IFrame以Post取得網頁

首先解決IFrame以Post取得網頁的問題,其實解決的方法非常簡單,僅需要利用Html的特性就可以了,其Html如下所述:


<iframe name="myFrame">
</iframe>
<form id="myForm" name="myForm" method="post" target="myFrame" action="/Home/MyFunction">
   <input type="hidden" name="var1" value="1" />
   <input type="hidden" name="var2" value="2" />
</from>

從上面的範例中可以看到主要有三大元素:

iframe
form
input

iframe是我們本次討論的主體,我們的目標就是要將網頁的內容呈現在iframe中,而form正是達成我們目標的工具。form採用post的方式與server溝通,而目標(target)設定為iframe的name,如此一來一旦post之後就會將網頁呈現在iframe中。

有的時候,我們server端的方法需要輸入參數,而我假設server端有某一個方法它的輸入參數是var1和var2各為整數型別,為了能夠傳遞參數到該目標function,故在form中放置了兩個隱藏欄位,並且名字與server端的輸入參數對應。

單單只有這樣啥都不會發生,為什麼呢?
因為這面看到的Html啥事都不會去做,form也不可能自動做動作,因此我們還需要再加一小段的Js就能達成我們要的功能。


<script type="text/javascript">
$("form#myForm").submit();
</script>

這樣一來當瀏覽器執行到下面這段Js時就會將form給Post到Server端,而Server端收到後會回傳頁面給form指定的iframe。

殘酷的現實

當你興沖沖的使用了上面這段範例去改造Colorbox,在很多瀏覽器都很OK,But!在IE7就會有靈異事件。

你會看到你的瀏覽器突然另開新頁籤顯示Server端回傳的網頁內容而不是在iframe中,這該怎麼辦呢?

其實這是創建iframe時的一個大問題,IE7就會有那麼點與眾不同,但是仍是有解!


var name ='myIframe'
var iframe;
try {
          iframe = document.createElement("<iframe name='" + name + "'>");
} catch (ex) {
          iframe = document.createElement("iframe");
}

包在try中的建立iframe的方法針對IE是workable的,但是對於它牌瀏覽器卻有問題,是故用偷懶法在catch中以另一種方式創建iframe。

如此一來算是正式解掉一些不同瀏覽器可能發生的問題,而下面是在Colorbox中對於iframe這段我修改的內容:


if (settings.iframe) {
    var name = (new Date()).getTime();
    try {
            iframe = document.createElement("<iframe name='" + name + "'>");
    } catch (ex) {
             iframe = document.createElement("iframe");
             iframe.id = name;
             iframe.name = name;
             iframe.className = prefix + 'Iframe';
    }

    if (frameBorder in iframe) {
             iframe[frameBorder] = 0;
    }

    if (allowTransparency in iframe) {
             iframe[allowTransparency] = "true";
    }

     if (!settings.scrolling) {
             iframe.scrolling = "no";
     }

     $(iframe)
					.attr({
					    'class': prefix + 'Iframe',
					    allowFullScreen: true, // allow HTML5 video to go fullscreen
					    webkitAllowFullScreen: true,
					    mozallowfullscreen: true
					})
					.one('load', complete)
					.appendTo($loaded);

     $("<form></form>")
        .attr({
                  id: "form" + name,
                  target: name,
                  method: 'POST',
                  action: settings.href
          })
          .html(
                    "<input type='hidden' name='UserName' value='" + settings.data.UserName + "'/>" +
                    "<input type='hidden' name='BonusNo' value='" + settings.data.BonusNo + "'/>" +
                    "<input type='hidden' name='IsUrlEncode' value='true'/>"
           )
           .appendTo($loaded);
           $("<script type='text/javascript'>$('form#form" + name + "').submit();</script>").appendTo($loaded);
                $events.one(event_purge, function () {
                    iframe.src = "//about:blank";
                });

                if (settings.fastIframe) {
                    $(iframe).trigger('load');
                }
} else {
       complete();
}

回首頁