4

我要做的是通过href链接将用户传递给php脚本，然后让他们传递回与点击链接之前完全相同的位置，就像页面没有刷新一样。有谁知道这是否或如何可能？谢谢你。

4

5 回答 5

9

使用 HTML，您可以拥有以下内容

<p id='open_here'><a href='script.php'> Send to script </a> </p>

然后你可以链接回那个确切的位置

<a href="mypage.html#open_here">Send Back to page</a>

因此，本质上，您可以使用重定向回页面，而不是使用 previuos 代码片段中的常规链接

//php redirect
<?php header('Location: mypage.html#open_here'); ?>

//Javascript redirect
<script type='text/javascript'>
    window.location = "mypage.html#open_here";
</script>
于 2013-07-09T19:03:49.263 回答
2

如果您不介意添加一些 Javascript 以使其工作，这里有一个解决方案，可以重定向回与用户单击链接时完全相同的滚动条位置。

index.php（链接所在的文件）

<script>
    window.addEventListener('load', function() {
        // Do we have a #scroll in the URL hash?
        if(window.location.hash && /#scroll/.test(window.location.hash)) {
            // Scroll to the #scroll value
            window.scrollTo(0, window.location.hash.replace('#scroll=', ''));
        }

        // Get all <a> elements with data-remember-position attribute
        var links = document.querySelectorAll('a[data-remember-position]');

        if(links.length) {
            // Loop through the found links
            for(var i = 0; i < links.length; i++) {
                // Listen for clicks
                links[i].addEventListener('click', function(e) {
                    // Prevent normal redirection
                    e.preventDefault();

                    // Redirect manually but put the current scroll value at the end
                    window.location = this.href + '?scroll=' + window.scrollY;
                });
            }
        }
    });
</script>

page.php（重定向回来的 PHP 脚本）

<?php

// Get the provided scroll position if it exists, otherwise put 0
$scrollPos = (array_key_exists('scroll', $_GET)) ? $_GET['scroll'] : 0; 

// Redirect back to index.php and provide the scroll position as a hash value
header('Location: index.php#scroll='.$scrollPos);

希望能帮助到你！:)

于 2013-07-09T19:58:09.740 回答
1

我只是在这里散布想法，但我会使用 javascript 来拦截用户对 href 的点击，并首先使用 .preventDefault 。然后找出用户在页面上的位置。也许通过将页面拆分为由 ID 标识的部分。您的 html 标记将类似于

<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>

因此，当 javascript 阻止链接执行时，它会确定用户当前位于哪个部分。假设我们知道每个部分的高度。然后我们需要找出滚动条的位置。我没有这样做，但看看这里

http://api.jquery.com/scrollTop/

一旦我们知道了每个部分的高度，并且一旦我们可以检测到滚动条的位置，我们就可以确定用户所在的部分。然后，我们获取 href 链接的 url 并向其添加查询字符串，例如http://something.com/script.php?section=2并使用您想要的任何数据将用户重定向到它。然后，一旦脚本完成它的工作，将查询字符串附加到 redirect-uri 并使用http://something.com#section-2之类的内容将用户重定向回来，用户将立即弹出到 section-2

我知道这不是一个非常具体的答案，但希望我已经为您提供了一些线索和想法如何实现这一目标。让我知道它是如何工作的！

于 2013-07-09T19:10:52.713 回答
0

我必须记住 <select> 的滚动位置。下面的例子。三个提交按钮来说明为什么有三个 getElementById。要查看它的工作，您必须先移动滚动条

<?php
$scrollusObscura=$_GET["imgbtn"];

$header = <<<EOD
<!DOCTYPE html>
<html>
<head>
<title>snk_db</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<head>
<script>
    function gety(){

        var y=document.getElementById('myUlID').scrollTop;
        document.getElementById('imgbtn1').value=y; 
        document.getElementById('imgbtn2').value=y;
        document.getElementById('imgbtn3').value=y;
    }
    function itemRelevatur(scrollum){
        document.getElementById('myUlID').scrollTo(0, scrollum);
    }
</script>
</head>
<body  onload="itemRelevatur({$scrollusObscura})" >
EOD;
$html= <<<EOD
<div >

<select size="6" id="myUlID" name="myUlName" onscroll="myTimer = setInterval(gety, 300)">
    <option>'1'</option>
    <option>'2'</option>
    <option>'3'</option>
    <option>'4'</option>
    <option>'5'</option>
    <option>'6'</option>
    <option>'7'</option>
    <option>'8'</option>
    <option>'9'</option>
    <option>'10'</option>
    <option>'11'</option>
    <option>'12'</option>
    <option>'13'</option>
    <option>'14'</option>
    <option>'15'</option>
    <option>'16'</option>
    <option>'17'</option>
    <option>'18'</option>
    <option>'19'</option>
</select>

</div>
EOD;


$html1= <<<EOD
<div><form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn1' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form>
EOD;
$html2= <<<EOD
<form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn2' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form>
EOD;
$html3= <<<EOD
<form method='GET' action'myscript.php'>
            <input type='hidden' name='imgbtn' id='imgbtn3' value=''></input>
            <input type='submit'  value='Submit' ></input>
</form></div>
EOD;

echo $header;
echo $html;
echo $html1;
echo $html2;
echo $html3."</body></html>";
于 2016-04-25T09:28:20.193 回答
0

我在使用 cookie javascript 库时遇到了重大问题，在我需要滚动 onload 事件之前，大多数 cookie 库加载速度不够快。所以我选择了现代 html5 浏览器来处理这个问题。它将最后滚动位置存储在客户端 Web 浏览器本身中，然后在重新加载页面时从浏览器读取设置回最后滚动位置。

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

<script type="text/javascript">
$(document).ready(function () {

    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        $(window).scrollTop(localStorage.getItem("my_app_name_here-quote-scroll"));
    }

    $(window).on("scroll", function() {
        localStorage.setItem("my_app_name_here-quote-scroll", $(window).scrollTop());
    });

  });
</script>
于 2019-09-01T16:23:49.613 回答