[HTML/jQuery] 把目前瀏覽的iframe頁面轉為另一頁面英文版

[HTML/jQuery] 把目前瀏覽的iframe頁面轉為另一頁面英文版

來源問題:http://social.msdn.microsoft.com/Forums/zh-TW/236/thread/02c1cb4a-433c-4be3-8b91-4603a3440ada

希望我沒理解錯誤(汗

網站資料夾架構:

image

中文index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--以下範例要注意Open Redirect的駭客攻擊-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(init);

        function init() { //頁面的DOM都載入後要做的事

            if (getParameterByName('defaultUrl') != '') {//QueryString有值

                $('#iframePage').attr("src", getParameterByName('defaultUrl'));

            } else {
                $('#iframePage').attr("src", 'main.html');//QueryString沒值的iframe預設src
            }
        }

        function getParameterByName(name) {//取得QueryString
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            if (results == null)
                return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        } 


        function GoEnglish() {

            var iframePageUrl = $('#iframePage').attr("src");//取得目前iframe的src

            var iframePageEnglishUrl = iframePageUrl.replace('.html', '') + '_e.html';//把目前iframe的src轉為英文版
            window.location.href = '../english/index_e.html?defaultUrl=' + iframePageEnglishUrl;//網頁導向英文版的首頁並傳參數
        }

        function changeIframeSrc(href) {

            $('#iframePage').attr('src', href);
        
        }
    </script>
</head>
<body>


   <div style="width:10%;float:left;">
     <a id="a_GoEnlgish" href="javascript:GoEnglish();">切換到英文版</a><br />
       <a href="javascript:changeIframeSrc('main.html');">連結到main</a><br />
       <a href="javascript:changeIframeSrc('about.html');">連結到about</a><br />
    </div>
      
     <div style="height:1024px;"><!--要讓iframe高度100%的話,要記得詳細定義它的容器高度-->
      <iframe id="iframePage" src="" name="right" width="90%" height="100%" title="Forum" scrolling="auto">
      </iframe>
     </div>

</body>
</html>

英文index_e.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--以下範例要注意Open Redirect的駭客攻擊-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(init);

        function init() { //頁面的DOM都載入後要做的事

            if (getParameterByName('defaultUrl') != '') {//QueryString有值

                $('#iframePage').attr("src", getParameterByName('defaultUrl'));

            } else {
                $('#iframePage').attr("src", 'main_e.html'); //QueryString沒值的iframe預設src
            }
        }

        function getParameterByName(name) {//取得QueryString
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regexS = "[\\?&]" + name + "=([^&#]*)";
            var regex = new RegExp(regexS);
            var results = regex.exec(window.location.href);
            if (results == null) 
            return "";
            else
                return decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        function GoChinese() {

            var iframePageUrl = $('#iframePage').attr("src"); //取得目前iframe的src

            var iframePageChineseUrl = iframePageUrl.replace('_e.html', '') + '.html';  //把目前iframe的src轉為中文版
            window.location.href = '../main/index.html?defaultUrl=' + iframePageChineseUrl; //網頁導向中文版的首頁並傳參數
        }

        function changeIframeSrc(href) {

            $('#iframePage').attr('src', href);

        }
    </script>
</head>
<body>
 
 <div style="width:10%;float:left;">
       <a href="javascript:GoChinese();">Go Chinese</a><br />
       <a href="javascript:changeIframeSrc('main_e.html');">English main</a><br />
       <a href="javascript:changeIframeSrc('about_e.html');">English about</a><br />
    </div>
      
 <div style="height:1024px;"><!--要讓iframe高度100%的話,要記得詳細定義它的容器高度-->
  <iframe id="iframePage" src="" name="right" width="90%" height="100%" title="Forum" scrolling="auto">
  </iframe>
 </div>


</body>
</html>

 

執行畫面:

預設

image

點選about的超連結後:

image

點選「切換到英文版」超連結後:

image

(iframe畫面直接停在英文版的about_e.html)

 

點選English main超連結後:

image

再點選Go Chinese後:

image

(iframe畫面直接停在中文版的main.html)

 

以上都只用HTML和jQuery做出來的效果,因為傳Url參數來當做顯示畫面,所以須注意Open Redirect的駭客攻擊

懶人包程式碼下載

 

其他參考:

iframe版型語法集合

How to set iframe height 100% or scrollable at out page

用Javascript取得QueryString的function

用jQuery取得QueryString –Query String Object  Allen J