Question

背景：要在我网站上的页面之间进行转换，我使用的是一个淡入/淡出的白色不透明覆盖层。例如，当您单击链接时，脚本会阻止默认，将隐藏的白色叠加从隐藏变为可见（使屏幕完全变为白色），然后指示浏览器遵循原始链接。目标页面最初也是完全白色的，因为默认情况下覆盖层是可见的。加载目标页面后，脚本会告诉它淡出，显示下面的页面。

问题：通过在“body”标签中使用“onpageshow”标签，当用户点击浏览器的向后导航按钮时，我得到了从白色到清晰的淡化效果。但我不能让“onpagehide”标签按照我喜欢的方式工作 - 当用户点击浏览器的向后导航按钮时，浏览器会直接跳到白色（没有逐渐淡出白色效果）。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script>

function curtainup(event) {
    if (event.persisted) {
       $(".curtain").delay(500).fadeOut(500); 
    } else {
       $(".curtain").delay(500).fadeOut(500); 
    }}

</script>

<script>

function curtaindown(event) {
    if (event.persisted) {
        $(".curtain").fadeIn(500); 
    } }
</script>

<style>
    body {background-image: url('http://podcollective.com/assets/phong/world.patterns/egypt-V1/EGYPT-D-PATTERN.png');}

div#smalltextbox {
    z-index:5;
    position:relative;
    background:#7f7f7f;
    background:rgba(255,255,255,0.5);
    max-height:350px;
    max-width:1000px;
    padding-top: 10px;
    padding-right:30px;
    padding-bottom:40px;
    padding-left:30px;
    margin-bottom:20px;
    left:320px;
    float:left;
    transform-origin: 0px 0px;
}

div.curtain {
    background:#FFFFFF;
    position:fixed;
    width:7000px;
    height:100%;
    z-index:1010;
}

</style>
</head>

<body onpageshow="curtainup(event)" onpagehide="curtaindown(event)">

    <div class="curtain"></div>

    <div id="smalltextbox"><p>Lorem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem ipsum omet orem orem...</p></div>

</body>

Answer 1

要遵循您的代码逻辑，您需要：

拦截“后退按钮点击”事件。
执行“淡入淡出”转换
回到历史
等...

问题？没有“后退按钮点击”事件。我的意思是，当用户点击浏览器的后退按钮时，您无法拦截（甚至不知道）。

<强>然而...

您可以知道用户何时离开"onbeforeunload" event页面。事实上，这就是那些令人讨厌的添加功能（当你即将离开页面时会弹出警报）。

<强> ...所以...

您可以使用onbeforeunload事件来触发淡入淡出过渡，而不是拦截A标记（或按钮等）点击事件。

当浏览器向后导航时，如何在当前页面上运行函数？

1 个答案: