详解前端在html页面之间传递参数的方法

最新推荐文章于 2023-06-28 14:34:07 发布

云南仟龙Mark

最新推荐文章于 2023-06-28 14:34:07 发布

阅读量1.8k

点赞数

文章标签：前端 html javascript

原文链接：https://blog.51cto.com/u_15111999/4234867

版权

今天分享下”页面间互相传递参数的方法“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。新项目中常常会经常出现的一种状况，有一个列表，例如是实例列表，点一下列表中的某一项，自动跳转至详情页面。详细信息是按照所单击的某条纪录转化成的，由于实例和实际的详情页面，全是客户中后期填加的，大家逐渐撰写时，不太可能可循。因而页面跳转时，大家必须传送一个参数以往，那样大家能够根据这一参数开展数据信息要求，随后依据后台管理回到的信息来转化成网页页面。因而，根据a标签自动跳转的方法，肯定是难以实现的。

大家常常写form表单，递交时，能够传送参数，假如应用表单，并将其掩藏起來，应当能够达到效果。

除此之外，window.location.href和window.open还可以达到效果。

1、通过form表单传递参数

<head>

<title>Document</title>

</head>

<body>

</form>

</form>

</form>

</body>

</html>

function foo( http://www.qlyl1688.com/ ){

var frm = window.event.srcElement;

frm.hid.value = $(frm.hid).attr(“index”);

return true;

}

</script>

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

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

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

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

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

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

2、通过window.location.href

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

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.

继续上面的例子：

var index = "lemon";

var url = "receive.html?index="+index;

$("#more").click(function(){

window.open(url)

});

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

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

var newWin = window.open(url);

if(newWin == null){

alert("弹窗被阻止");

}

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

<script>

var blocked = false;

try{

var index = "lemon";

var url = "receive.html?index="+index;

$("#more").click(function(){

var newWin = window.open(url);

if(newWin == null){

blocked = true;

}

});

} catch(ex){

block = true;

}

if(blocked){

alert("弹出窗口被阻止");

}

</script>

以上是云南仟龙Mark给大家介绍的所有内容,希望对大家有所帮助，如果大家有任何疑问请在脚本之家留言，如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

云南仟龙Mark

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解前端在html页面之间传递参数的方法

今天分享下”页面间互相传递参数的方法“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。新项目中常常会经常出现的一种状况，有一个列表，例如是实例列表，点一下列表中的某一项，自动跳转至详情页面。详细信息是按照所单击的某条纪录转化成的，由于实例和实际的详情页面，全是客户中后期填加的，大家逐渐撰写时，不太可能可循。因而页面跳转时，大家必须传送一个参数以往，那样大家能够根据这一参数开展数据信息要求，随后依据后台管理回到的信息来
复制链接

扫一扫