页面被iframe与无刷新更换url方法

  1. 页面被iframe问题解决方法

     if (window.top.location !== window.self.location) {
             const data = JSON.stringify({ iframedRedirectSuccess: true });
             window.top.location.href = addURLParam(window.self.location.href, 'data', data);
           }
  2. 页面初始化获取参数
     import URL from 'url-parse';
     const {
         origin, protocol, host, hostname, port, query, hash,
       } = new URL(document.URL, true);
    
       const hostInfo = {
         origin, protocol, host, hostname, port, query, hash,
       };
  3. 页面无刷新删除url上参数(仅适用于无跨域更换url及参数)
      import qs from 'querystringify';
      import omit from 'lodash/omit';
      const param = omit(qs.parse(window.location.search), ['data']);
         const paramStr = qs.stringify(param, '?');
         const url = `${window.location.pathname}${paramStr}`;
         // This is for firefox will reload previous url when we click refresh button or press F5
         // after we use replaceState to replace a new url issue.
         window.location.hash = window.location.hash; // eslint-disable-line
         window.history.replaceState && window.history.replaceState({}, null, url);

原文地址:https://www.cnblogs.com/weilantiankong/p/11435976.html

时间: 2024-07-30 08:42:56

页面被iframe与无刷新更换url方法的相关文章

Html5无刷新修改Url

Html5无刷新修改Url,history pushState/replaceState (2014-03-01 01:11:20) 转载▼ 标签: it   一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通 过history对象提供对览器历史记录的访问能力.它暴露了一些非常有用的方法和属性,让你在历史记录中自由前进和后退. 1.历史记录的前进和后退 在历史记录中

HTML5新api即pushState和replaceState实现无刷新修改url

1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器我回去时要给我保持神秘状态. 先上代码,再解释这两个api. var url=window.location.href; var length=url.length; newur=url+"****"; history.replaceState(null, "",new

iframe实现无刷新上传文件(转)

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. [1].[代码] [HTML]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html>   <body>      <form action="upload.jsp

通过history.pushState无刷新改变url

背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性,地址栏上的资源路径没有被改变,随之而来的问题就是页面的状态无法被保存.这导致我们难以通过熟悉的方式(点击浏览器前进/后退按钮),在前后的页面状态间进行切换. 为了解决ajax页面状态不能返回的问题,人们想出了一些曲线救国的方法,比如利用浏览器hash的特性,将新的资源路径伪装成锚点,通过onhash

HTML5实现无刷新修改URL

前言 今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的. 我尝试了俩种方式来修改url: window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了...,搜索页面闪烁后才进入结果页,而结合不跳转页面就不会发生闪烁的情况,所以当页面刷新时,vue实例都会被重新加载. window.

HTML无刷新下载文件方法总汇

首先要保证有一个后台可以下载文件的方法,这里只总结前端解决方法,所以不对后台做分析,假设现在有一个下载文件的方法/project/download.action.如果不想通过后台直接下载可以看我的另一篇文章<html使用a标签不通过后台实现直接下载>. 使用a标签 <a href="/project/download.action" target="_blank">点击下载</a> 这里target属性不给也可以,但是页面会闪一下

history.pushState 实现ajax无刷新更改url

暂时没啥心得,直接上例子. 1 <html> 2 <head> 3 <title> 4 fasd 5 </title> 6 <script> 7 window.addEventListener('popstate', function(e){ 8 if (history.state){ 9 var state = e.state; 10 console.log(state.title); 11 } 12 }, false); 13 14 func

JS无刷新修改URL类似博客园翻页效果

<script type="text/javascript"> function changeURL(){ var url = document.getElementById('url').value; window.history.pushState({},0,'http://'+window.location.host+'/'+url); } </script>

PJAX全局无刷新的设置方法~

先添加必要文件: <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/jquery.pjax/1.9.5/jquery.pjax.min.js"></script> 然后下面加上: <script type="text/javascri