2

我一直在研究一些 JavaScript，到目前为止，最令人沮丧的事情之一是，如果使用 Back、Forward 或 Hard Refresh，我的 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> ';
    }

我的第二个问题是在我用来尝试使这些 HTML 页面动态运行的另一个 JavaScript 中。我正在使用 AJAX 与 PHP 脚本进行交互，但是，当它返回页面时（基本上是获取下一页并用 CSS 将它绑在第一个页面旁边，创建一个“双视图”），我的 JavaScript 没有得到应用，例如时间设置或生成的链接。如何处理？我不能使用window.onload，因为它只能使用一次 - 它正在另一个 JavaScript 中使用。我只是以某种方式修改 PHP 文件的结果吗？我正在使用正则表达式来抓取下一页，所以我实际上无法修改 PHP 中的结果...可以吗？

愿意向大多数解决方案让步，包括重写。

4

1 回答 1

4

回答第一个问题

这是浏览器的 Back-Forward 缓存导致的一个 JavaScript 小“问题”！我已经回答了一个类似的问题，但为了完整起见，这里是解决方案：

Firefox 和 iOS Safari 是唯一已知存在此问题的（在撰写本文时）。解决方案是挂钩window.unload事件，以及重新加载页面的特定条件window.onpageshow！

火狐修复

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);

回答第二个问题

您实际上可以onload使用多个脚本/多个函数挂钩事件。而不是使用覆盖形式的挂钩到一个事件，例如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!");
});
于 2013-04-22T02:21:06.837 回答