项目中经常出现的一种情况，有一个列表，比如一个案例列表，点击列表中的某一项就可以跳转到详情页面。 详情是根据点击记录生成的，因为案例和具体详情页面都是用户后期添加的，我们不可能在开始编译时就穷尽。 因此，在跳转页面的时候，我们需要传递一个参数，这样我们就可以通过这个参数请求数据，然后根据后台返回的数据生成页面。 所以，跳过a标签的方法肯定行不通。
我们经常写form表单，提交时可以传递参数。 如果使用该表格并隐藏它，应该可以达到疗效。
另外window.location.href和window.open也能达到疗效。
1.通过form表单传递参数
Document
function foo(){
var frm = window.event.srcElement;
frm.hid.value = $(frm.hid).attr("index");
return true;
}
点击图片后，跳转到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变为：
然后我们使用inside方法提取我们需要的参数
3.通过window.location.open
如果您想打开一个新页面而不是更改当前页面html 新窗口，则 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)
});
这样，当你点击时，就会打开一个新的页面html 新窗口，并且该页面的url地址与上一个页面相同。
由于浏览器安全限制，部分浏览器降低了弹出窗口配置的限制。 大多数浏览器都有外部弹出窗口阻止程序。 因此，弹出窗口可能会被阻止。 当弹出窗口被拦截时，需要考虑两种可能，一种是浏览器外部的屏蔽程序阻止了弹出窗口，那么window.open()很可能返回Null，此时只要返回检测该值，即可判断弹窗是否被遮挡。
var newWin = window.open(url);
if(newWin == null){
alert("弹窗被阻止");
}
另一种是弹出窗口被浏览器扩展或其他程序阻止，那么 window.open() 通常会抛出错误，因此，要准确测量弹出窗口是否被阻止，必须检查返回值同时window.open()被封装在try-catch块中，上面的例子可以写成如下：
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("弹出窗口被阻止");
}
以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。
发表评论