• 跨页传值另一种方法


         遇到这种方法也是出于巧合,我是在学习一线码农大牛的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实现

  • 相关阅读:
    第01组 团队Git现场编程实战
    2019 SDN上机第1次作业
    第二次结对编程作业
    团队项目-需求分析报告
    团队项目-选题报告
    2019 SDN阅读作业
    2019 SDN上机第3次作业
    2019 SDN上机第2次作业
    2019 SDN上机第1次作业
    OpenDayLight安装Features
  • 原文地址:https://www.cnblogs.com/xiaohuasan/p/5525299.html
Copyright © 2020-2023  润新知