2

我有一个 JavaScript 函数，允许我切换联系表单的可见性。提交表单后，我希望表单保持打开状态。是否有某种方法可以创建 cookie 来告诉脚本在提交后重新加载页面时显示表单。

HTML

<a href="#" onClick="toggle_visibility('toggle');">Contact</a>

CSS

#toggle{
    display:none;
}

JS

function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.display == 'block'){
        e.style.display = 'none';
    }else{
        e.style.display = 'block';
    }
}
4

2 回答 2

2

您可以使用您使用的任何服务器端技术重定向到 /ThePage?toggle=1 并使用以下内容读取 url 参数：

function onload() {
    var toggle = getUrlParams()["toggle"];
    if (toggle == "1") toggle_visibility('toggle');
}

function getUrlParams() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
于 2012-05-13T19:13:14.353 回答
1

您可以使用本地 javascript 将状态保存在 cookie 中（不涉及服务器）：

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function toggle_visibility(id, cookieName) {
   var e = document.getElementById(id);
   var visible;
   if(e.style.display == 'block') {
      e.style.display = 'none';
      visible = false;
   } else {
      e.style.display = 'block';
      visible = true;
   }
   if (cookieName) {
       createCookie(cookieName, visible, 1);
   }
}

然后，当你的页面被加载时，你可以在 DOM 加载完成后调用这个函数来恢复之前的状态：

function restore_visibility(id, cookieName) {
    var visibility = readCookie(cookieName);
    if (visibility == null) return;    // no cookie
    var e = document.getElementById(id);
    if (visibility) {
        e.style.display = 'block';
    } else {
        e.style.display = 'none';
    }
}

您可以使用类似"contactFormVisible"cookieName 的字符串。

于 2012-05-13T19:16:53.847 回答