使用 'Back'/JavaScript 推迟后 JavaScript 消失

Question

我已经在一些 JavaScript 上工作了一段时间，到目前为止最令人沮丧的事情之一是，如果使用后退、前进或硬刷新，我的 JavaScript 似乎会拒绝加载。考虑到我的网站是建立在通过 MySQL 数据库连接重复生成的静态 HTML 页面上，我必须手动添加主持人菜单，但有时似乎拒绝出现？

if (getCookie('opt23') !== '1') {
    var ajaxtwo = new XMLHttpRequest();
    var wrap = '';
    if (document.getElementById("firstpage") !== null) {
        wrap = document.getElementById("firstpage");
    } else {
        wrap = document.getElementById("firstpageinside");
    }
    var main = document.createElement("div");
    main.setAttribute("id","modmenu");
    wrap.appendChild(main);
    ajaxtwo.onreadystatechange = function() {
        var reports = (ajaxtwo.responseText === '0' ? 'flagblue.png' : 'flag.png');
        reportcount.innerHTML = '<img src=' + ku_cgipath + '/css/images/mods/' + reports + ' style="height:15px;' +
                                'width:15px;" />' + ajaxtwo.responseText;
    };
    ajaxtwo.open("GET",ku_cgipath + "/manage_page.php?action=reports&count",true);
    ajaxtwo.send();
    var threadid = document.getElementsByName("replythread");

    // taking the initiative of togglePassword, this makes things less needlessly lengthy.
    main.innerHTML =
        '<h2>Quick Mod</h2>' +
        '<input type="hidden" name="threadid" value="' + threadid[0].value +'" />' +
        '<label for="modaction">Action </label><select id="action" name="modaction">' +
            '<option value="">&lt;none&gt;</option>' +
            '<option value="delpost">Delete posts</option>' +
            '<option value="rebuildone">Rebuild board</option>' +
            '<option value="bans">View Bans</option>' +
            '<option value="appeals">View Appeals</option>' +
            '<option value="stickypost">Sticky Thread</option>' +
            '<option value="unstickypost">Unsticky Thread</option>' +
            '<option value=lockpost>Lock Thread</option>' +
            '<option value="unlockpost">Unlock Thread</option>' +
            '<option value="bump">Instant Bump</option>' +
            '<option value="viewthread">Switch to Moderator View</option>' +
        '</select>' +
        '<input type="submit" name="submit" value="Submit">' +
        '<a href="' + ku_cgipath + '/manage_page.php?action=reports" target="_blank">' +
        '<span id="reportcount"></span></a> ';
    }

我的第二个问题是在另一个 JavaScript 中，我用它来尝试使这些 HTML 页面动态运行。我正在使用 AJAX 与 PHP 脚本交互，但是，当它带回页面时(基本上是获取下一页并使用 CSS 将其与第一个页面相邻，创建“双 View ”)，我的 JavaScript 不会得到应用，例如时间设置或生成的链接。人们如何处理这个问题？我无法使用 window.onload 因为它只能使用一次 - 它正在另一个 JavaScript 中使用。我是否只是以某种方式修改 PHP 文件的结果？我正在使用正则表达式来获取下一页，因此我实际上无法修改 PHP 内的结果...可以吗？

愿意承认大多数解决方案，包括重写。

Answer 1

第一个问题的答案

这是一个由浏览器的后退缓存引起的 JavaScript“问题”!我已经回答了 similar question ，但为了完整起见，这里是解决方案:

Firefox 和 iOS Safari 是唯一(截至撰写本文时)已知存在此问题的浏览器。解决方案是 Hook window.unload 事件，并在 window.onpageshow 内重新加载页面的特定条件!

---

修复 Firefox

jQuery:

$(window).unload(function () { $(window).unbind('unload'); });

JavaScript:

function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); }
window.addEventListener('unload', UnloadHandler, false);

iOS Safari 修复

jQuery:

$(window).bind('pageshow', function(event) {
    if (event.originalEvent.persisted) {
        window.location.reload() 
    }
});

JavaScript:

window.addEventListener('pageshow', function (event) {
    if (event.persisted) {
        window.location.reload() 
    }
}, false);

---

第二个问题的答案

您可以实际上使用多个脚本/多个函数 Hook 到onload事件。您应该使用 "add" an event listener ，而不是使用 Hook 事件的覆盖形式，例如 ajaxtwo.onreadystatechange 。

简单的例子是:

ajaxtwo.addEventListener('readystatechange', function () {
    alert("hi! I'm done!");
}, false);

至于一个帮助函数，它将“为你做这件事”并向后兼容某些旧版本的 Internet Explorer；您可以使用这个简单的功能:

function AttachEventListener(element, event, handler) {
    if (element.addEventListener) {
        element.addEventListener(event, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, handler);
    } else {
        alert('Invalid element specified for AttachEventListener');
    }
}

用法:

AttachEventListener(ajaxtwo, 'readystatechange', function () {
    alert("hi! I'm using an awesome helper function!");
});