38445人阅读
JS高级程序设计（34）
项目中经常会出现的一种情况，有一个列表，譬如是案例列表，点击列表中的某一项，跳转至详情页面。详情是根据所点击的某条记录生成的，因为案例和具体的详情页面，都是用户后期自行添加的，我们开始编写时，不可能穷尽。因此跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。因此，通过a标签跳转的方式，肯定是行不通的。
我们经常写form表单，提交时，可以传递参数，如果使用表单，并将其隐藏起来，应该可以达到效果。
除此以外，window.location.href和window.open也可以达到效果。
1、通过form表单传递参数
lang="en"&
http-equiv="content-type" content="text/charset=utf-8" /&
name="Keywords" content="关键词一，关键词二"&
name="Description" content="网站描述内容"&
name="Author" content="Yvette Lau"&
&Document&
rel="stylesheet" href=""/&
type = "text/javascript" src = "jquery-1.11.2.min.js"&&
name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"&
type="hidden"
name="hid" value = "" index = "lemon"&
class = "more" src = "main_jpg10.png" /&
type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/&
name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"&
type="hidden"
name="hid" value = "" index = "aaa"&
class = "more" src = "main_jpg10.png" /&
type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/&
name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"&
type="hidden"
name="hid" value = "" index = "bbb"&
class = "more" src = "main_jpg10.png" /&
type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/&
function foo(){
var frm = window.event.srcE
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="+
$("#more").click(function(){
window.location.href =
当前页面会被替换成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="+
$("#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块中，上面的例子中可以写成如下形式：
var blocked = false;
var index = "lemon";
var url = "receive.html?index="+
$("#more").click(function(){
var newWin = window.open(url);
if(newWin == null){
blocked = true;
} catch(ex){
block = true;
if(blocked){
alert("弹出窗口被阻止");
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：577147次
积分：46573
积分：46573
排名：第75名
原创：112篇
评论：125条
文章：99篇
阅读：522114
(3)(1)(1)(1)(4)(13)(4)(3)(4)(15)(7)(8)(18)(13)(16)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'后使用快捷导航没有帐号？
只需一步，快速开始
查看: 9178|回复: 6
使用js 怎么给另一个页面传递参数
UID255284在线时间 小时积分1250帖子离线17492 天注册时间
银牌会员, 积分 1250, 距离下一级还需 1750 积分
function sendParameter(param){
& & url=&b.html?&+name=
& & window.showModelessDialog(url,window,'dialogWidth:515dialogHeight:400dialogLeft:400;dialogTop:200;help:status:scroll:resizable:no');
}
复制代码
怎么获得传过来的name参数？
复制代码
UID360272在线时间 小时积分831帖子离线17492 天注册时间
高级会员, 积分 831, 距离下一级还需 169 积分
location.search来接受参数
UID22771在线时间 小时积分1581帖子离线17492 天注册时间
银牌会员, 积分 1581, 距离下一级还需 1419 积分
如果单单是用window.showModelessDialog
可以通过这个方法的第二个参数来解决
function sendParameter(){
& & url=&b.html&;
& & window.showModelessDialog(url,window,'dialogWidth:515dialogHeight:400dialogLeft:400;dialogTop:200;help:status:scroll:resizable:no');
}
// 调用
var window.param = &some value&;
sendParameter();
复制代码
alert(window.dialogArguments.param);
复制代码
这种方式可以直接传对象（上例传a.html的window对象）
缺点是b.html已和a.html关联
UID255284在线时间 小时积分1250帖子离线17492 天注册时间
银牌会员, 积分 1250, 距离下一级还需 1750 积分
楼上的说的b.html已和a.html关联是什么意思啊？
我的意思是a.html中的一个按钮 按了之后弹出一个showModelessDialog对话框
这个对话框的内容是b.html
实际就是通过a.html页面中的不同按钮值的不同来显示这个对话框
UID331080在线时间 小时积分46帖子离线17492 天注册时间
新手上路, 积分 46, 距离下一级还需 4 积分
楼上已经有人说了方法！
/*------------URL取值----------------------------*/
& & & & var url=location.
& & & & var Request = new Object();
& & & & if(url.indexOf(&?&)!=-1)
& & & & {
& & & & & & & & var str = url.substr(1)&&//去掉?号
& & & & & & & & strs = str.toLowerCase();
& & & & & & & & strs = strs.split(&&&);
& & & & & & & & for(var i=0;i&strs.i++)
& & & & & & & & {
& & & & & & & & & & & & Request[strs[i].split(&=&)[0]]=unescape(strs[i].split(&=&)[1]);
& & & & & & & & }
& & & & }
//比如获取参数abc
var abc = Request[&abc&];
UID255284在线时间 小时积分1250帖子离线17492 天注册时间
银牌会员, 积分 1250, 距离下一级还需 1750 积分
感谢！！万分感谢！！今天帮了我2个忙了啊 ~~
UID186953在线时间 小时积分222帖子离线17492 天注册时间
中级会员, 积分 222, 距离下一级还需 278 积分
我还是没有搞懂
Powered by