我可以知道人们何时在新选项卡中打开我网站上的链接吗?

发布于 2024-12-13 07:13:41 字数 828 浏览 0 评论 0原文

我想知道的是,当人们单击我网站上的链接(内部链接 - 不是其他网站)时,他们只是单击它还是按住 ctrl 键单击它(或右键单击 - 在新选项卡中打开)。

我使用PHP。

所以例子: 此人位于第 1 页,单击第 2 页的链接。 当它们位于第 2 页时,我想知道它们来自哪里(_server['http_referer'] 给了我),但我也想知道他们是否在新窗口/选项卡中打开了页面。我需要知道这一点,因为页面上有历史后退按钮。

这样做的原因是为了了解网站周围的浏览历史记录 - 我创建会话来跟踪浏览历史记录(以便我可以在任何给定时间返回一页、两页或三页),但我不希望选项卡之间的会话发生冲突,以便每个选项卡都有自己的浏览历史记录。这就是为什么我需要为每个打开的选项卡创建新会话。


我发现解决我的问题的一个可能的解决方案是使用与此类似的javascript:

<script>
var history_status = history.length;
var referrer_site = document.referrer;

if(history_status > 1 && referrer_site != "") {
    alert(referrer_site);
} else {
    alert('No referrer site');
}
</script>

我需要稍微改变一下,但这是我的第一个演示来检查它是否有效(并且它确实有效)

我首先需要找到什么用户正在使用浏览器,因为当您使用 IE 时,history_status 为历史记录中的第一页提供 0,但如果您使用 Firefox 或 Chrome,则为 1。

What I want to know is when people click a link on my site (internal link - not to another websites) if they just clicked it or if the ctrl-clicked it (or right click - open in new tab).

I use PHP.

So example:
Person is on page1 and click on link for page2.
When they are on page2 I want to know where they came from (_server['http_referer'] gives me that) but I also want to know if they opened the page in new window/tab. I need to know this because of history back button on the page.

Reason for this is to know the browsing history around the site - I create session to keep track of browsing history (so that I can go one page back, two pages back or three pages back at any given time) but I don't want the sessions to conflict between tabs so that each tab has it's own browsing history. Thats why I need to create new session for each tab opened.


What I have found as a possible solution to my problem is to use javascript similar to this:

<script>
var history_status = history.length;
var referrer_site = document.referrer;

if(history_status > 1 && referrer_site != "") {
    alert(referrer_site);
} else {
    alert('No referrer site');
}
</script>

I need to change it a little bit more but this was my first demo to check if it works (and it did)

I first need to find what browser user is using because history_status gives 0 for the first page in history when you use IE but 1 if you are using Firefox or Chrome.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

泛泛之交 2024-12-20 07:13:41

这听起来并不是很好的用户体验。后退按钮和允许人们打开新选项卡是用户期望以某种方式表现的行为。就我个人而言,我会觉得这令人沮丧。如果他们无法仅针对该选项卡形成自己独特的浏览历史记录,那么新选项卡的意义何在?

如果你真的很想这么做的话。创建一个带有数字的 cookie,在每个页面加载时增加该数字,并将页面 URL 存储在该会话的数据库中。页面加载时,拉入历史记录并通过 JavaScript 将其加载到浏览器历史记录中。哎呀。

This doesnt sound like good user experience. Back buttons and allowing people to open new tabs is something users expect to behave in a certain way. Personally i would find it frustrating. What is the point in a new tab if they cant form their own unique browsing history just for that tab?

If you really really wanted to do this. Create a cookie with a number, on every page load bump up thr number and store the page URL in your database for that session. On page load, pull in thr history and load it into your browser history via JavaScript. Eeek.

由于这个问题确实很老,我将说明这个问题以使其更清楚。希望我没有误解所提出的问题。

案例:
- 我有一个网站。这个网站有一个表格。该表格位于 2 个(或更多)网页上:表格 p001表格 p002(...表格 pX)。
- 在表格p001的页面上有一个按钮,其中包含指向表格p002所在页面的链接。
- 在包含表单最后部分的页面(在我的例子中是表单 p002)上,有一个提交按钮。提交按钮会将您重定向到您点击将您转至表格 p001 页面的按钮时您所在的我的网站页面,或者您之前所在的我的网站上的任何页面您加载了页面表单 p001
- 想象一下以下 3 个示例情况(显然有超过 3 种可能的情况,只是为了简短起见)。
输入图片此处描述

  • 示例 01:我位于我网站的第 X 页。有一个表单按钮,我单击该按钮并转到表单页面第 1 部分(表单 p001)。我单击按钮 Part-02 转到包含表单 (表单 p002) 第 2 部分的页面。当我完成表格的第二部分时,我单击“提交”。这会将我重定向到我网站上的第 X 页
  • 示例 02:浏览了我网站上的几个页面后,我现在位于Y 页。有表单按钮,我右键单击该按钮并在新选项卡(选项卡 02)内打开表单页面第 1 部分(表单 p001)。我单击按钮 Part-02 转到包含表单 (表单 p002) 第 2 部分的页面。当我完成表格的第二部分时,我单击“提交”。这会将我重定向回网站上的Y 页(标签 02 内)。
  • 示例 03:浏览了我网站上的几个页面后,我现在位于Z 页面。有表单按钮,我右键单击该按钮并在新选项卡(选项卡 02)内打开表单页面第 1 部分(表单 p001)。我右键单击按钮 Part-02,转到新选项卡(选项卡 03)内包含表单 (Form p002) 第 2 部分的页面。当我完成表格的第二部分时,我单击“提交”。这会将我重定向回网站上的Z 页(标签 03 内)。

如果该人已加载表单(表单 p001)的第一页,则通过放置链接直接在新选项卡或窗口内的浏览器的位置/地址栏中输入表单页面,然后我们假设您将被重定向到主页。不过,这与这个问题并不真正相关。

回答:
您可以使用window.localStoragedocument.referrer
您可以使用 window.localStorage 来存储原始页面,即我在转到表单第一页之前所在网站上的页面。测试以下代码。

somePageOnMyWebsite.html(页面 X、Y 或 Z)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1>A Random page on My Website</h1>
    <p>My paragraph.</p>
    <a type="button" href="formp001.html" target="_blank">Click to form</a>
</body>
</html>

formp001.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function(){
            var originalPage = document.referrer;
            if( originalPage != null)
                window.localStorage.setItem("redirectPage", originalPage);
            else
                window.localStorage.setItem("redirectPage", "");
        });
    </script>
</head>
<body>
    <h1>Form p001</h1>
    <form action="formp002.html" target="_self" method="post">
        <input type="submit" value="Go to Form p002" />
    </form>
</body>
</html>

formp002.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function(){
            if (window.localStorage.getItem("redirectPage") === null || window.localStorage.getItem("redirectPage") === ""){
                // The form was not accessed by clicking on a link on a page on my website, so just redirect to my homepage ...
                document.getElementsByTagName("FORM")[0].setAttribute("action", "./hometest.html");
            } else{
                document.getElementsByTagName("FORM")[0].setAttribute("action", window.localStorage.redirectPage);
            }
        });
    </script>
</head>
<body>
    <h1>Form p002</h1>
    <form action="#" target="_self" method="post">
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

hometest.html(我的网站的主页)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1>HOME PAGE</h1>
    <p>My home</p>
</body>
</html>

我的回答基于 birgir 对 Luc 回答的评论。

Since the question is really old I will illustrate the question to make it more clear. Hopefully, I didn't also misunderstand the question asked.

Case:
- I have a website. This website has a form. The form is located on 2 (or more) webpages: Form p001 and Form p002 ( ... Form pX).
- On the page with Form p001 there is a button with the link to the page where Form p002 is located.
- On the page with the last part of the form, which in my case is Form p002, there is the submit button. The submit button will redirect you to whichever page on my website you were when you clicked a button that sent you to the page Form p001 or whichever page on my website you were before you loaded the page Form p001.
- Imagine the following 3 example cases (there are obviously more than 3 possible cases, just to keep it short).
enter image description here

  • Example 01: I am on Page X on my website. There is the button to the form, I click on this and go to the form page part 1 (Form p001). I click on the button Part-02 to go to the page with part 2 of the form (Form p002). When I finish the second part of the form, I click on submit. This will redirect me to Page X on my website
  • Example 02: After looking around on several pages on my website I am now on Page Y. There is the button to the form, I right-click on this and open the form page part 1 (Form p001) inside a new tab (tab 02). I click on the button Part-02 to go to the page with part 2 of the form (Form p002). When I finish the second part of the form, I click on submit. This will redirect me back to Page Y on my website (inside tab 02).
  • Example 03: After looking around on several pages on my website I am now on Page Z. There is the button to the form, I right-click on this and open the form page part 1 (Form p001) inside a new tab (tab 02). I right-click on the button Part-02 to go to the page with part 2 of the form (Form p002) inside a new tab (tab 03). When I finish the second part of the form, I click on submit. This will redirect me back to Page Z on my website (inside tab 03).

If the person has loaded the first page of the form (Form p001), by putting the link of the form page directly in the LOCATION/ADDRESS bar of the browser inside a new tab or window, then we assume you will be redirected to the home page. This is not reallly relevant to this question tho.

Answer:
You can use window.localStorage and document.referrer
You can use window.localStorage to store the original-page, the page on my website where I was before going to the first page of the form. Test the following codes.

somePageOnMyWebsite.html (Page X, Y or Z)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1>A Random page on My Website</h1>
    <p>My paragraph.</p>
    <a type="button" href="formp001.html" target="_blank">Click to form</a>
</body>
</html>

formp001.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function(){
            var originalPage = document.referrer;
            if( originalPage != null)
                window.localStorage.setItem("redirectPage", originalPage);
            else
                window.localStorage.setItem("redirectPage", "");
        });
    </script>
</head>
<body>
    <h1>Form p001</h1>
    <form action="formp002.html" target="_self" method="post">
        <input type="submit" value="Go to Form p002" />
    </form>
</body>
</html>

formp002.html

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function(){
            if (window.localStorage.getItem("redirectPage") === null || window.localStorage.getItem("redirectPage") === ""){
                // The form was not accessed by clicking on a link on a page on my website, so just redirect to my homepage ...
                document.getElementsByTagName("FORM")[0].setAttribute("action", "./hometest.html");
            } else{
                document.getElementsByTagName("FORM")[0].setAttribute("action", window.localStorage.redirectPage);
            }
        });
    </script>
</head>
<body>
    <h1>Form p002</h1>
    <form action="#" target="_self" method="post">
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

hometest.html (home page of my website)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <h1>HOME PAGE</h1>
    <p>My home</p>
</body>
</html>

My answer is based on birgir's comment on Luc's answer.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文