详解前端在html页面之间通报参数的办法
我们经常写form表单，提交时，可以传递参数，假如使用表单，并将其潜藏起来，应当可以到达结果。
除此之外，window.location.href和window.open也可以到达结果。
1、通过form表单传递参数
<html>
<head>
<!--网站编码格局，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描写内容">
<meta name="Author" content="Yvette Lau">
<title>Document</title>
<!--css js 文件的引入-->
<!-- <link rel="shortcut icon" href="images/favicon.ico"> -->
<link rel="stylesheet" href=""/>
<script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>
</head>
<body>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "lemon">
<img src = "main_jpg10.png" />
<input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
</form>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "aaa">
<img src = "main_jpg10.png" />
<input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
</form>
<form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">
<input type="hidden" name="hid" value = "" index = "bbb">
<img src = "main_jpg10.png" />
<input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>
</form>
</body>
</html>
<script>
function foo(){
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.
连续上面的例子：
<script>
var index = "lemon";
var url = "receive.html?index="+index;
$("#more").click(function(){
window.open(url)
});
</script>这样在点击的时候，就会翻开一个新页面，页面的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>以上就是详解前端在html页面之间传递参数的办法的具体内容，更多请关注百分百源码网其它相关文章！
