如何检测是否从另一个页面上的按钮访问了 URL，如果没有，则将用户重定向到主页？ [复制]答案

【问题标题】：How to detect if a URL was accessed from a button on another page, and if not, re-direct the user to the homepage? [duplicate]如何检测是否从另一个页面上的按钮访问了 URL，如果没有，则将用户重定向到主页？ [复制]
【发布时间】：2021-05-22 01:21:30
【问题描述】：

我在我的网站上有一个预订表格，点击它会在新窗口中打开一个表格供用户填写以预订餐桌，当表格完成后，该窗口将关闭。

问题是，我希望只能通过主页上的此按钮（或主页上的任何按钮）访问表单。不过我想阻止的是，用户可以直接访问 /booking 而无需与主页交互。

我想要的行为是

如果用户点击主页上的按钮，它应该使用window.open命令打开表单（已经实现），用户可以填写表单没有问题。

如果用户只是输入 url www.DOMAIN.com/booking，它应该识别出他们没有从主页访问过这个页面，只需将他们重定向回www.DOMAIN.com。

这是我目前的尝试。

Booking.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Booking</title>
    
</head>
<body>

    <div id="booking-form">
    </div>
    <script>
    const myReferrer = document.referrer;
    const hasReferrer = document.referrer != "";
    const bookingFormArea = document.getElementById('booking-form')
    if(hasReferrer) {
        bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
} else {
bookingFormArea.innerHTML=`window.location.href = 'www.DOMAIN.com';` //Re-direct User to homepage
}
</script> 
</body>
</html>

更新：经过进一步测试，似乎通过“onClick”方法使用按钮链接到“/booking”并使用“window.open”，document.referrer 仍然空白，是这样吗行为正确吗？

【问题讨论】：

请注意，没有标准规定必须填充 document.referrer。如果您想知道用户是否访问了您的网站，请使用 cookie 或 WebStorage 或 window.name 或任何其他跟踪用户的方式。

标签： javascript html

【解决方案1】：

看起来您正在将 window.location.href 作为预订表单的 innerHTML 的一部分附加。当 document.referrer 为空时，您应该自动将用户重定向到主页。

<script>
    const ref = document.referrer;
    const bookingFormArea = document.getElementById('booking-form')
    if (ref.match(/^https?:\/\/([^\/]+\.)?site\.com(\/|$)/i)) {
         // came from the home page
         // TODO: Replace domain URL site\.com
          bookingFormArea.innerHTML=`<div id="rd-widget-frame" style="max-width: 600px; margin: auto;"></div>` // LOAD BOOKING FORM
    } else {
          window.location.href = "https://stackoverflow.com/";
    }
</script>

不要忘记将域名或 URL 更改为您自己的域。

<button class="booking-button">Book Now</button>

打开预订页面脚本。

<script>
document.querySelector(".booking-button").addEventListener("click", function(e) {
   e.preventDefault();
   window.location = "https://stackoverflow.com/booking";
}); 
</script>

【讨论】：

经过进一步测试，似乎通过使用按钮链接到“/booking”，document.referrer 仍然出现空白，这是正确的行为吗？
您使用的是实际的按钮元素吗？尝试使用链接。上面的例子。
嗯，关键是要打开一个具有表单确切尺寸的新窗口，我使用 window.open 来实现这一点，我可以用标签来做到这一点吗？我想打开一个新窗口，并且在加载时不允许滚动、不更改 url、不调整大小和固定高度/宽度。
是的，这是可能的。您可以将单击事件侦听器附加到链接标记并打开一个窗口。但你也应该使用 window.location。
哦，我从来没有真正使用 window.location 进行重定向.. 所以我怎么能使用 window.location 来重定向而不是 window.open("DOMAIN.com")并让 document.referrer 把它捡起来？因为问题是，作为窗口打开的一部分，我有一些属性。我的代码是：window.open("URL", 'MyWindow1', "height=670,width=600,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");