跨页传值另一种方法
遇到这种方法也是出于巧合,我是在学习一线码农大牛的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可以互相比较,应该可以发现很多不同,当然收获也是多多的。
分类:
html
, javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?