页面刷新后移动到网页的一部分

Posted

技术标签:

【中文标题】页面刷新后移动到网页的一部分【英文标题】:Moving to a part of webpage after page refresh 【发布时间】:2011-12-08 16:20:01 【问题描述】:

我有一个给定文章的 cmets 列表,并且我在 cmets 下有一个表单供用户添加他们自己的 cmets。

我正在使用 php 进行一些表单验证。

这是过程:

    用户填写(或不填写)表单并点击提交按钮。页面刷新。 PHP 验证用户输入,如果没有错误则提交 cmets 或 生成错误列表。

    如果存在错误,则显示错误。

    问题是我希望错误在它执行的表单之前显示在 cmets 下方,但是当页面刷新时,页面顶部会显示,我需要它直接进入错误和表单(很像页面锚)

这可能吗?

点击提交按钮后调用

if(empty($errors))
        $result = post_comment('event',$event_id, $sendername, $senderemail, $userurl, $comment);
        if ($result == 'Correct') 
            //header('Location: /'.$_SERVER['REQUEST_URI']);
            header('Location: '.$_SERVER['REQUEST_URI']);
        
        else 
            $send_error = $result;

这是靠近 cmets 和表单,如果存在错误,我想分页访问

// If there was an error sending the email, display the error message
if (isset($send_error)) 
echo "<a name=\"commentsform\"></a>";
echo "There was an error: ".$send_error;

/**
* If there are errors and the number of errors is greater than zero,
* display a warning message to the user with a list of errors
*/
if ( isset($errors) && count($errors) > 0 ) 
    echo ( "<h2 class='errorhead'>There has been an error:</h2><p><span class='bold'>You forgot to enter the following field(s)</span></p>" );
    echo ( "<ul id='validation'>\n" );
    foreach ( $errors as $error ) 
        echo ( "<li>".$error."</li>\n" );
    
echo ( "</ul>\n" );

        
    

【问题讨论】:

如果 url 的哈希匹配,则使用本机浏览器跳转到 id:example.com#id 将转到 example.com 并跳转到 id 为 id 的元素 【参考方案1】:

给表单一个可以通过 URL 跳转到的 ID:

<div id="submitComment">
  <!-- Comment form here -->
</div>

然后将用户重定向回具有适当哈希标记的相同 URL:

header('Location: http://www.example.com#submitComment');

【讨论】:

应该是:w3.org/TR/html401/struct/links.html#h-12.2.3。它是否真的是另一个问题。【参考方案2】:

找到你的表单标签,它看起来像这样

<form action='yourpage.php'>

在 URL 后面加上一个散列标签以及提交时将转到的锚点-

<form action='yourpage.php#commentsform'>

【讨论】:

【参考方案3】:

使用页面锚点,您可以通过更改 url 中的哈希值将用户跳转到页面的任何部分。

让表单将用户发送到锚点,如下所示:

<form action='yourpage.php#comments'>

并在您希望用户最终到达的位置制作锚点:

<a name="comments"></a> 

【讨论】:

以上是关于页面刷新后移动到网页的一部分的主要内容,如果未能解决你的问题,请参考以下文章

移动端 点击返回按钮页面不刷新

changePage 后 jQuery Mobile 刷新页面

如何用js控制网页刷新后滚动条保持在原来的位置

如何在一个页面中触发一个事件后就刷新这个页面的另一部分呢?

移动端点击返回时强制页面刷新解决办法(pageshow)

如何让框架网页有自动刷新功能?