跨页传值另一种方法

遇到这种方法也是出于巧合，我是在学习一线码农大牛的JavaScript系列发现的，他的系列文章写的真好，通俗易懂，而且还有查漏补缺之效。真的感谢他，感谢分享。阅读这个之前可以去他的博客一睹风采，真心喜欢。

好了，开始我的实践，我是在他的例子上改造的，方便快捷。还是两个页面。一个是index.html，一个是Flight.html.代码如下。

index.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <iframe name="childframe" src="Flight.html"></iframe>

    <script type="text/javascript">
         function PopBreakfast(obj) {
           //航班
            var airplanes = ["MU", "CA", "CZ"];
            var result = window.frames[0].flight.SearchFlight(airplanes);
             obj.value = result;
            //alert(result);
        }
    </script>
    
    <table>
 <tr>
 <td>城市</td>
 <td><input type="text" id="txtcity" onclick="PopBreakfast(this)"/></td>
 <td>地址</td>
 <td><input type="text" id="txtaddress" onclick="PopBreakfast(this)"/></td>
 </tr>
</table>
</body>
</html>

Flight.html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript">
        var flight = (function () {
            var result= {        
                info: null,
                SearchFlight: function (arr) {
                  alert(this.info);
                 return  this.info;
                  //alert(arr);
                   // var result = arr instanceof Array;
                   // alert(result);
                }
            };
             return result;
        })();
        
         function Confirm() {
            var selectValue = document.getElementById("selectcity").value;
            var inputValue = document.getElementById("txtaddress").value;
            if (inputValue.length > 0) {
              // flight.info(inputValue);
               flight.info=inputValue;
            } else {
                flight.info=selectValue;
                //flight.info ( selectValue);
            }
          
          }

        
    </script>
    
     <center>
        <div id="content-wrapper">
            <table cellpadding="0" cellspacing="0" width="250px">
                <tr>
                    <td class="title">
                        选择城市
                    </td>
                </tr>
                <tr>
                    <td>
                        <select id="selectcity" class="city">
                            <option value="">-- Select --</option>
                            <option value="北京">北京</option>
                            <option value="广州">广州</option>
                            <option value="上海">上海</option>
                            <option value="香港">香港</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="txtaddress" type="text" class="city" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="Confirm" onclick="Confirm()" class="confirm-btn" />
                    </td>
                </tr>
            </table>
        </div>
    </center>
</body>
</html>

这是在ie下测试的，效果如下：

比较丑陋，不过不影响我们追求知识。

另外一个跨页取值的demo可以互相比较，应该可以发现很多不同，当然收获也是多多的。

大牛的博客

这个利用iframe实现