两个html页面转换,两个静态html页之间的传值

需求：两个静态页面，打开新的页面后需要根据当前页面点击的按钮去确定新页面默认的显示

需要跳转的页面按钮

新页面的tab页

解决思路

在跳转后传递值，然后新页面获取值，根据值去添加案例的 class，使对应的案例标题颜色改变

解决方法1—隐藏域

window.open() 父子页面的传参&传值

首先，父页面中button 跳转采用

window.open('case-detail.html');

button绑定 value 值

案例详情

子页面中获取 vlaue的值

var a = window.opener.document.getElementById("btn-case").value;

因为我这边涉及多个，如果使用同一个id 不能获取vlaue 值，所以我在页面上写了一个空的按钮用来存储所点击的 vlaue 值

当点击 button 时， 把当前 button 的 vlaue值赋值为** id="btn-case" ** 的 vlaue值

$('.btn-arr').click(function(){

$('#btn-case').val($(this).val());

window.open('case-detail.html');

});

然后在子页面中就可以通过去获取** id="btn-case"** 的** vlaue值，来设置跳转后的默认显示，选项比较可以采用switch case** 语句

var a = window.opener.document.getElementById("btn-case").value;

a = parseInt(a);

var aA = $('.case-detail .tab-ul').find('a');

switch(a){

case 1:

aA.removeClass('active');

aA.eq(1).addClass('active');

break;

case 2:

aA.removeClass('active');

aA.eq(2).addClass('active');

break;

default:

break;

}

注意：这里的a ** 使用alert(typeof(a));**弹出 String ，使用switch case 语句时需要转换为 number 值，或者 **case **值设置为 ‘1’，添加引号。

网上还有很多两个静态页面的传值，选用这个是因为取值方便.只要window.opener指向父窗口,就可以访问所有对象.不仅可以访问值,还可以访问父窗口的方法.值长度无限制. 缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.

解决方法2—Url传值

url传值 形如：case.html?id=1&msg=true

跳转页面时把参数写入Url后的参数中，这种方法对与a标签跳转很方便，后面价格参数即可，下面来看看页面中怎么去应用

页面A

案例详情

对于上面的案例可以直接在html上把参数带上，在打开的页面中获取。

如果对于input框输入，或者其他需要传入的值

案例详情

var oInput = document.getElementById("test");

var oBtn = document.getElementById("btn");

oBtn.onclick = function(){

var id = oInput.value;

window.location.href = "case.html?id="+id;

//传递多个参数

window.location.href = "case.html?id="+id+"&msg=123";

};

页面B

B页面通过url去分割找到需要的参数

/*

* 获取Url查询参数 公共方法

*/

function getParams(name, href) {

var href = href || window.location.href,

value = '';

if (name) {

var reg = new RegExp(name + '=([^&]*)', 'g');

href.replace(reg, function($0, $1) {

value = decodeURI($1);

});

} else {

value = {};

var reg = /\b(\w+)=([^\/&]*)/g;

href.replace(reg, function($0, $1, $2) {

value[$1] = decodeURI($2);

});

}

return value;

};

//idB中就是获取的A页面带过来的id

var idB = getParams("id");