源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 9364|回复: 0
打印 上一主题 下一主题

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

[复制链接]

1175

主题

1564

帖子

9320

金币

超级版主

Rank: 8Rank: 8

积分
20328
跳转到指定楼层
1#
发表于 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变成:



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

然后再对当前的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变为:



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

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>
复制代码


更多学习资料和建站素材请访问锦尚中国 感谢您的支持!
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-11-25 09:55 , Processed in 0.157544 second(s), 28 queries .

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

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明