源码论坛公告:有很多假冒锦尚中国网址和名称的网站出现,还有声称是跟我们合作网站,请擦亮眼睛避免被骗,本站唯一域名为52jscn.com 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

新版大型房产门户源码下载
知名广告联盟 精准不扣量
企业免备案主机仅需80元
亿恩免费建网站 服务器特价
锦尚中国源码论坛
百度站长平台 精确提升SEO
旅游网解决方案 大型旅游门户
大型装修门户助您抢占商机
天翼云主机 四川资源池开启微信营销项目诚招代理【稳定】ios苹果签名 网站封装
安乐业房产网全新来袭
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
网站源码下载,商业源码下载,源码论坛,网站源码,php源码,asp源码全部就在锦尚中国源码论坛
查看: 802|回复: 0

[CSS/Html] 前端在html页面之间传递参数的方法详解

[复制链接]

987

主题

1248

帖子

736万

金币

超级版主

Rank: 8Rank: 8

积分
14725885
发表于 2018-11-1 13:18:26 | 显示全部楼层 |阅读模式

我们在项目中经常会出现的一种情况,假如有一个列表是案例列表,点击列表中的某一项,跳转至详情页面。详情是根据所点击的某条记录生成的,因为案例和具体的详情页面,都是用户后期自行添加的,我们开始编写时,不可能穷尽。因此跳转页面时,我们需要传递一个参数过去,这样我们才能通过这个参数进行数据请求,然后根据后台返回的数据来生成页面。因此,通过a标签跳转的方式,肯定是行不通的。
我们经常写form表单,提交时,可以传递参数,如果使用表单,并将其隐藏起来,应该可以达到效果。

除此以外,window.location.href和window.open也可以达到效果。

1、通过form表单传递参数

  1. <html lang="en">
  2.     <head>
  3.     <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
  4.         <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  5.         <meta name="Keywords" content="关键词一,关键词二">
  6.         <meta name="Description" content="网站描述内容">
  7.         <meta name="Author" content="Yvette Lau">
  8.         <title>Document</title>
  9.         <!--css js 文件的引入-->
  10.         <!-- <link rel="shortcut icon" href="images/favicon.ico">        -->
  11.         <link rel="stylesheet" href=""/>
  12.         <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>
  13.     </head>
  14.     <body>      
  15.         <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
  16.             <input type="hidden"  name="hid" value = "" index = "lemon">
  17.             <img class = "more" src = "main_jpg10.png" />
  18.             <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
  19.         </form>     
  20.         <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
  21.             <input type="hidden"  name="hid" value = "" index = "aaa">
  22.             <img class = "more" src = "main_jpg10.png" />
  23.             <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
  24.         </form>
  25.         <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
  26.             <input type="hidden"  name="hid" value = "" index = "bbb">
  27.             <img class = "more" src = "main_jpg10.png" />
  28.             <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
  29.         </form>
  30.     </body>
  31. </html>
  32. <script>
  33.     function foo(){
  34.         var frm = window.event.srcElement;
  35.         frm.hid.value = $(frm.hid).attr("index");
  36.         return true;
  37.     }
  38. </script>
复制代码


点击图片时,跳转至receive.html页面。页面的url变成:

2018062916233729.png

我们想要传的字符串已经传递了过来。

然后再对当前的url进行字符串分割

  1. window.location.href.split(“=”)[1]//得到lemon
复制代码


我们拿到需要传来的参数之后,就可以根据这个进行下一步的处理了。

除了上述通过字符串分割来获取url传递的参数外,我们还可以通过正则匹配和window.location.search方法来获取。

2、通过window.location.href

譬如我们点击某个列表,需要传递一个字符串到detail.html页面,然后detail.html页面根据传来的值,通过ajax交互数据,加载页面的内容。

  1. var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });
复制代码


当前页面会被替换成recieve.html的页面,页面的url变为:

2018062916233730.png

然后我们再用上面的方法提取自己需要的参数

3、通过window.location.open

如果是希望打开一个新页面,而不是改变当前的页面,那么window.location.href就不适用了,此时,我们需要借助于window.location.open()来实现

简单介绍有一下window.open()函数,window.open()有三个参数,第一个参数是要打开的页面的url,第二个参数是窗口目标,第三个参数是一个特定字符串以及一个表示新页面是否取代浏览器历史集中当前加载页面的布尔值,通过只需要传递第一个参数。第二个参数还可以是”_blank”,”_self”,”_parent”,”_top”这样的特殊窗口名称,”_blank”打开新窗口,”_self”实现的效果同window.location.href.

继续上面的例子:

  1. <script>
  2.     var index = "lemon";
  3.     var url = "receive.html?index="+index;
  4.     $("#more").click(function(){
  5.         window.open(url)
  6.     });
  7. </script>
复制代码


这样在点击的时候,就会打开一个新页面,页面的url地址与上面相同。

由于浏览器的安全限制,有些浏览器在弹出窗口配置方面增加限制,大多数浏览器都内置有弹出窗口的屏蔽程序,因此,弹出窗口有可能被屏蔽,在弹出窗口被屏蔽时,需要考虑两种可能性,一种是浏览器内置的屏蔽程序阻止弹出窗口,那么 window.open()很可能返回Null,此时,只要监测这个返回的值就可以确定弹出窗口是否被屏蔽。

  1. var newWin = window.open(url);
  2. if(newWin == null){
  3.     alert("弹窗被阻止");
  4. }
复制代码


另一种是浏览器扩展或其他程序阻止的弹出窗口,那么window.open()通常会抛出一个错误,因此,要像准确的检测弹出窗口是否被屏蔽,必须在检测返回值的同时,将window.open()封装在try-catch块中,上面的例子中可以写成如下形式:

  1. <script>
  2.     var blocked = false;
  3.     try{
  4.         var index = "lemon";
  5.         var url = "receive.html?index="+index;
  6.         $("#more").click(function(){
  7.            var newWin = window.open(url);
  8.            if(newWin == null){
  9.                blocked = true;
  10.            }
  11.         });
  12.     } catch(ex){
  13.         block = true;
  14.     }
  15.     if(blocked){
  16.         alert("弹出窗口被阻止");
  17.     }   
  18. </script>
复制代码


更多学习资料和建站素材请访问锦尚中国 感谢您的支持!
锦尚数据隆重推出免备案国内BGP多线主机,相信欧阳没错滴   双线至强云主机火热订购 http://yun.52jscn.com/shuanxian.html
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码

锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 )

GMT+8, 2019-2-17 21:48 , Processed in 0.138243 second(s), 30 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 锦尚爱心