js中网页前进和后退的代码

Posted 2023-04-13

前进: history.forward();=history.go(1);

后退: history.back();=history.go(-1); 

但是如果加在热区中

<<span class="start-tag">map name="Maps" id="Maps"> <<span class="start-tag">area shape="rect" coords="2,2,79,52" href="javascript:history.go(-1);"  target="_blank"> <<span class="start-tag">area shape="rect" coords="77,2,166,52" href="#"> <<span class="starttag">area shape="rect" coords="166,4,242,51" href="#" target="_blank"> <<spanclass="starttag">area shape="rect" coords="248,5,318,53" href="javascript:history.go(1);"target="_blank"> </<span class="end-tag">map>

如果有target="_blank"这个属性，就会打开一个新的窗口，所以前进和后退没有起作用，所以需要删掉这个属性。

拓展资料

Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。

参考技术A 前进: history.forward();=history.go(1);
后退: history.back();=history.go(-1);
注意事项：前进后退按钮是需要在特定环境下才有效果的，即你需要从另一个页面进入到这个页面后，点击这个后退按钮才有后退的效果，否则是没有的。
【拓展资料】
javascript中的后退和刷新；
<input type=button value=刷新 onclick="window.location.reload()">
<input type=button value=前进 onclick="window.history.go(1)">
<input type=button value=后退 onclick="window.history.go(-1)">
<input type=button value=前进 onclick="window.history.forward()">
<input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 onclick="window.history.go(-1);window.location.reload()">在C# Web程序中，如为页面按钮写返回上一页代码
this.RegisterClientScriptBlock("E", "<script language=javascript>history.go(-2);</script>");
其中，history.go(-2)，要写为-2，因在按钮事件触发前，已刷新一次页面，所以应是-2。
Response.Write("<script language=javascript>history.go(-2);</script>");
此处也要写为“-2”。跟直接写脚本的有所不同。history.back()是会上一页
i=1
history.go(i)去指定的某页
如果是history.go(0)那就是刷新这两个属于JS代码，相当于IE的前进、后退功能。
具体的用处就要看什么时候需要这个就用上。比如用户注册时的验证是后台验证，不符合要求的时候就可以用这个，可以最大限度保证用户少重复输入数据。
例如：载入页面：
function onLoadPage()
if(event.srcElement.tagName=="SPAN")
oFrame=top.window.middle.frames[2];
oTxt=event.srcElement.innerText;
switch(oTxt)
case "前 进":
oFrame.history.go(1);
case "后 退":
oFrame.history.back();
case "刷 新":
oFrame.location.reload();




打开一个jsp页面,肯定是用客户端脚本进行刷新了。
Javascript刷新页面的几种方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href 参考技术B <input type="button" value="后退" onclick="javascript:history.go(-1);">
<input type="button" value="前进" onclick="javascript:history.go(1);">
这个前进后退按钮是需要在特定环境下才有效果的，即你需要从另一个页面进入到这个页面后，点击这个后退按钮才有后退的效果，否则是没有的。

参考资料：各种常见用途的按钮：http://www.jscode.cn/jscode/code_370510126.htm

参考技术C <a href="javascript:history.go(-1);">后退</a>
<a href="javascript:history.go(1);">前进</a>

Gatsby.js：使用 URL 参数和浏览器后退/前进按钮导航

【中文标题】Gatsby.js：使用 URL 参数和浏览器后退/前进按钮导航

【英文标题】：Gatsby.js: Navigating with URL Parameters and the Browser Back / Forward Buttons

【发布时间】：2018-08-02 23:39:30

【问题描述】：

我有一个显示帖子列表的文章组件。该列表是分页的，因此每页最多可以显示 10 个帖子。有一个“下一页”按钮，单击该按钮将更新组件状态和相应的 url 参数，如下所示：

第 1 页：/新闻

第 2 页：/news?page=2

第 3 页：/news?page=3

...等等。 constructor() 和 render() 方法的设置方式，例如，如果用户直接导航到 /news?page=3，它将读取此 URL 参数并显示正确的帖子。

我遇到的问题是浏览器的后退和前进按钮似乎没有重新呈现页面。因此，如果用户点击“下一页”按钮几次，然后点击后退按钮，URL 将更新，但页面不会重新呈现。有没有办法强制它这样做？

我猜有一种方法可以通过添加 window.history 侦听器来完成此操作，但我不确定是否有推荐的做法与 gatsby-link 一起使用。

这是一个精简版的组件供参考：

import React,  Component  from 'react';
import  navigateTo  from 'gatsby-link';
import getUrlParameter from '../functions/getUrlParameter';

export default class extends Component 
  constructor(props) 
    super(props);

    /* external function, will grab value
    * of ?page= url parameter if it exists */
    const urlParamPage = getUrlParameter('page');
    const currentPage = urlParamPage ? urlParamPage : 1;

    this.state = 
      currentPage
    ;
  

  nextPage() 
    const  props, state  = this;

    const urlParam = state.currentPage > 1
      ? `?page=$state.currentPage`
      : '';

    navigateTo(props.pathname + urlParam);
    this.setState(currentPage: this.state.currentPage + 1);
  

  render() 
    const  props, state  = this;

    const articles = props.articles
      .slice(state.currentPage * 10, state.currentPage * 10 + 10);

    return (
      <div>
        <ul>
          articles.map((article) => <li>article.title</li>)
        </ul>

        <button onClick=() => this.nextPage()>Next Page</button>
      </div>
    );
  

【问题讨论】：

你能检查componentWillReceiveProps是否在后退/前进按钮点击时被触发？

hm 它根本没有被触发，在后退/前进点击或初始组件加载时

您使用的是哪个版本的 gatsby？通过浏览器按钮导航时，您是否还看到任何控制台错误？

@DivyanshuMaithani 我使用的是 gatsby 版本 1.9.158，没有出现控制台错误

【参考方案1】：

您的页面不会重新呈现，因为它实际上是同一页面 - 组件已安装。当您在 constructor() 中获取数据时，您的页面不会更新，因为 React 组件的构造函数在它被挂载之前被调用 (source)。

你所谓的urlParam 只是componentWillReceiveProps(nextProps) 应该在nextProps.location.search 中收到的一个新道具。

编辑：

您必须提升状态，因为只有根组件会在浏览器后退和前进按钮上收到props.location。你的文章组件神经元的pathname 属性发生了变化，这就是为什么componentWillReceiveProps 永远不会在这里触发。

代码：

/src/pages/root.js

import React,  Component  from 'react';
import  navigateTo  from 'gatsby-link';

import Articles from '../components/Articles';

export default class Test extends Component 
  constructor(props) 
    super(props);

    this.state = 
      currentPage: 1,
      data: , // your ext data
    ;

    this.nextPage = this.nextPage.bind(this);
  

  nextPage() 
    const  currentPage  = this.state;
    const  pathname  = this.props.location;
    const url = `$pathname?page=$currentPage + 1`;

    this.setState( currentPage: currentPage + 1 );
    navigateTo(url);
  

  componentWillReceiveProps(nextProps) 
    const  pathname, search  = nextProps.location;
    const getParam = /(\d+)(?!.*\d)/;

    const currentPage = search !== '' ? Number(search.match(getParam)[0]) : 1;

    /* get your ext. data here */
    const data = ;

    this.setState( currentPage, data );
  

  render() 
    const  currentPage, data  = this.state;
    return (
      <div>
        /* other contents here */
        <Articles
          nextPage=this.nextPage
          currentPage=currentPage
          data=data
        />
      </div>
    );
  

/src/components/Articles.js

import React from 'react';

const Articles = ( nextPage, currentPage ) => 
  return (
    <div>
      <div>Page: currentPage</div>
      <button onClick=() => nextPage()>Next Page</button>
    </div>
  );
;

export default Articles;

【讨论】：

感谢@Nenu 的回复，但在初始页面加载或使用“下一页”按钮导航时，似乎从未调用过componentWillReceiveProps 生命周期方法

这很奇怪。我发现here 有时 componentWillReceiveProps 不会因为不明原因而触发……我鼓励您在 gatsby 项目中创建一个新页面，看看 componentWillReceiveProps 是否有效（这是我在回答这个代码示例之前所做的）。然后尝试调试这个或重构你的代码结构。

我有同样的直觉，听起来很奇怪，当你的路线改变时它不会触发

在我的 gatsby 项目中，一个页面导入并显示了这个组件。我的猜测是，因为它实际上并没有链接到新页面，而是更新了内部组件的状态并随后更新了 URL，这导致后退/前进按钮没有任何效果。有没有办法让它加载整个页面，就好像它是从另一个页面导航一样？

@Nenu 原来除了提升状态，我还需要更新 gatsby / gatsby-link！我分别使用的是 1.9.158 和 1.6.34 版本，更新到 1.9.231 和 1.6.39 后它开始工作。感谢所有的帮助！

【参考方案2】：

这可以使用窗口对象中存在的历史对象来解决。

另一种方法是使用 React-Router-DOM，它是 ReactJS 应用程序中用于路由的最新路由模块。因此，对于 V4 路由器的参考，请遵循此代码。

  import BrowserRouter as Router, Route, Switch, Redirect from 'react-router-dom';

导入路由器后，只需尝试在其中设置根组件的范围，然后就可以在其中创建路由。

  <Router>
    <div className="App" id="App">
      <Route path="/" exact component=Home/>
      <Route path="/about" exact component=About/>  
      <Route path="/misreports" exact component=MISReport/>  
      <Route path="/contact" exact component=Contact/>  
    </div>
  </Router> 

请记住，路由器应该只包含一个孩子，否则它将无法按预期工作。这样路由就变得很容易使用了。

【讨论】：

感谢@Amit 的回复，但我认为 react 路由器解决方案不适用于这种特殊情况。您能否使用历史对象演示解决方案？