Question

我对JavaScript非常陌生，如果通过菜单页面上的链接访问该页面，我正试图想出一种触发关键帧动画的方法。到目前为止我使用document.referrer提出的代码不起作用：

var ref = document.referrer; 
if (ref.includes("menu")) {
    document.getElementById('symbol').style.animation=' 2s ease-in-out 0s 1 slideLogo';
}

我做错了什么？该脚本位于<body>的末尾，当ref更改为包含搜索词的语句时，脚本运行良好。我目前只在本地测试，这可能是为什么？

Answer 1

如果没有看到其余的代码，很难说出现了什么问题，但以下情况应该有效。

另存为landing.html

<style type="text/css">
    #symbol {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    @keyframes slideLogo { from { margin-left: -20%; } to { margin-left: 100%; }  }

</style>

<h1>Landing page</h1>

<div id="symbol"></div>

<script>
    var ref = document.referrer; 
    console.log('referrer is', ref);
    if (ref.includes("menu")) {
        console.log('set the style.animation property');
        document.getElementById('symbol').style.animation=' 2s ease-in-out 0s 1 slideLogo';
    }
    else {
        console.log('DO NOT set the style.animation property');
    }
</script>

在名为menu.html的文件中添加一个指向landing.html的链接。并确保您通过http://localhost/menu.html

之类的内容访问它

同样，在一个文件中放置一个login.html链接，该文件在网址中没有任何“菜单”，例如http://localhost/something-else.html。这不会触发动画。

因此，如果这三个文件的文件名被访问，那么来自http://localhost/menu.html的链接将触发http://localhost/landing.html上的动画

值得注意的是，您的引荐来源测试会查看引荐来源网址中的任何位置，因此即使像http://localhost/not-a-menu.html这样的部分匹配也会触发动画。因此，如果你担心这一点，你可能想让你的测试更加具体。

此外，对于浏览器兼容性，我认为此时使用indexOf代替includes仍然更安全。

if(document.referrer.indexOf('menu') !== -1) { ... }

动画取决于前一页（通过链接）

1 个答案: