html 返回上一页，并且刷新

Posted 2023-04-17

前提：
在访问a页面前，已经访问了b页面。
内容：
现在停留在a页面，在a页面中，触发了某个function，之后function结束前，需要返回到上一页面（也就是b页面），同时需要刷新b页面。。
我知道用 history.back(-1)可以返回上一页面，但是，在返回上一页面后，还要刷新该怎么做？？

window.parent.location.href='b页面地址';
可以在b页面载入的时候加入刷新操作，window.location.reload();或者history.go(0)；
返回上一页是history.go(-1)；
一般页面会自动刷新的，所以上面的window.location.href='';就可以解决。追问

但是怎么获取上一页面的地址

追答

那你还用back(-1)，在b页面载入页面时加上window.location.reload();
要不然试试这个opener.location.reload();/ self.opener.location.reload();或者opener.window.location.href = opener.window.location.href;
在当前页面直接刷新父页面，你可以先执行这个，在返回上一页，你试试，我没试过，应该可以的。

追问

无限刷新。。

追答

self.opener.location.reload();history.back(-1);试试

参考技术A

常用 刷新的几种方法:

<a href="javascript:history.go(-1)">返回上一页</a> 
<a href="javascript:location.reload()">刷新当前页面</a> 
<a href="javascript:" onclick="history.go(-2); ">返回前两页</a> 
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a> 
<a href="javascript:" onclick="history.back(); ">返回上一页</a> 


<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>

参考技术B 既然你需要刷新就不能使用back(-1)，应该使用window.open或local.href之类的追问

那么怎么获取上一页面的地址？？

Flutter中如何返回刷新上一页？

【中文标题】Flutter中如何返回刷新上一页？

【英文标题】：How to go back and refresh the previous page in Flutter?

【发布时间】：2018-09-24 14:43:48

【问题描述】：

我有一个主页，单击该主页时会通过导航将我带到另一个页面，在其中执行一些操作，然后按返回按钮将我带回主页。但问题是主页没有刷新。

当我按下返回按钮并刷新主页时，有没有办法重新加载页面？

【问题讨论】：

“刷新第1页”是什么意思？

@RaoufRahiche 比如更新Page1中的listview。

Force Flutter navigator to reload state when popping的可能重复

【参考方案1】：

当您像这样伪代码

导航回第一页时，您可以触发 API 调用

class PageOne extends StatefulWidget 
  @override
  _PageOneState createState() => new _PageOneState();


class _PageOneState extends State<PageOne> 
  _getRequests()async

  
  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(onPressed: ()=>
        Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageTwo()),)
        .then((val)=>val?_getRequests():null),
      ),
    ));
  


class PageTwo extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    //somewhere
    Navigator.pop(context,true);
  

如果 API 更新频繁，您也可以只使用流，新数据将在您的 ListView 中自动更新

例如使用 firebase 我们可以做到这一点

stream: FirebaseDatabase.instance.reference().child(
      "profiles").onValue

无论何时您更改数据库中的某些内容（例如从编辑个人资料页面），它都会反映在您的个人资料页面上。在这种情况下，这只是可能的，因为我使用的是onValue，它将继续监听任何更改并代表您进行更新。

【讨论】：

我们如何做到这一点***.com/questions/55296501/…

只需将 .then((val)=>val?_getRequests():null) 替换为 .then((val)=>_getRequests()) 即可。否则会出现bool != null exception。

【参考方案2】：

（在您的第一页）：使用此代码导航到第二页。

Navigator.pushNamed(context, '/page2').then((_) 
  // This block runs when you have returned back to the 1st Page from 2nd.
  setState(() 
    // Call setState to refresh the page.
  );
);

（在您的第 2 页）：使用此代码返回到第 1 页。

Navigator.pop(context);

【参考方案3】：

我只是用这个：

onPressed: () 
          Navigator.pop(context,
              MaterialPageRoute(builder: (context) => SecondPage()));
        ,

关闭当前页面：

Navigator.pop

浏览上一页：

MaterialPageRoute(builder: (context) => SecondPage())

在 FirtsPage 中，我在 startUpPage 上添加此刷新：

 @override
  void initState() 
    //refresh the page here
    super.initState();
  

【参考方案4】：

如果您使用 GetX ： 从 nextScreen 导航返回时使用结果如下：

Get.back(result: 'hello');

并使用此功能重新加载上一页：

void _navigateAndRefresh(BuildContext context) async 
    final result = await Get.to(()=>NextScreen());
    if(result != null)
      model.getEMR(''); // call your own function here to refresh screen
    
  

调用这个函数而不是直接导航到 nextScreen

【参考方案5】：

对于更细粒度、与页面无关的解决方案，我想出了这个 Android Single LiveEvent 模仿行为。

我在Provider 类中创建了这样的字段，例如：

SingleLiveEvent<int> currentYearConsumable = SingleLiveEvent<int>();

它有一个公共的设置器来设置值。公共consume 允许您仅读取一次值（如果存在）（请求 UI 刷新）。在您需要的地方调用consume（例如在build 方法中）。

您不需要Provider，您可以使用其他解决方案通过它。

实施：

/// Useful for page to page communication
/// Mimics Android SingleLiveEvent behaviour
/// https://***.com/questions/51781176/is-singleliveevent-actually-part-of-the-android-architecture-components-library
class SingleLiveEvent<T> 
  late T _value;
  bool _consumed = true;

  set(T val) 
    _value = val;
    _consumed = false;
  

  T? consume() 
    if (_consumed) 
      return null;
     else 
      _consumed = true;
      return _value;