JS 页面发生跳转但是url 不发生变化

有时候总想不改变url进行页面的跳转，而且有时候还要携带一些参数，或者参数还要安全或者过大，使用get或者post请求.

iframe实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>default</title>
</head>
<body><iframe src="./index.html" frameborder="0"></iframe>
</body>
</html>

a标签：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>main file</title>
</head>
<body><a href="./a.html">a.html</a><a href="./b.html">b.html</a>
</body>
<script></script>
</html>

<!-- a.html  -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>a file</title>
</head>
<body><div>i am a file!</div>
</body>
</html>

window.location.href实现：

window.location.href = "/?" + ({"path": "user/main"});window.location.href = "/?path=user/main";

ajax实现：

ajax发个get请求，把响应用document.write输出就可以了。
// 路径 参数 返回函数
$.get("/", {"path": "user/main"}, function (res) {document.write(res);
});$.post("/", {"path": "user/main"}, function (res) {document.write(res);
});$.ajax({url: "/user/getUser", // 请求urltype: "POST", // 请求方式data: JSON.stringify({"path": "user/main"}), // 请求参数格式化// dataType: "json", // 返回数据类型async: false, // 开启同步，关闭异步contentType: "application/json",success: function (res) { // res 响应结果// console.log("成功：" + JSON.stringify(res));// 保存数据到cookie缓存中// localStorage.setItem("menuList", JSON.stringify(menuData.menuList));// localStorage.setItem("menuArray", JSON.stringify(menuData.mArray));// window.location.href = "/?path=user/main";// 将请求返回的页面信息写出，展示在浏览器中（完成url不变，成功跳转页面的请求）document.write(res);},error: function (msg) {console.log("失败：" + msg); // 返回的错误信息}
});$.ajax({url: 'main.htm',success: function(res){document.write(res);}
});

以上就是一些实现方法，可自适配.

转载请注明出处！

JS 页面发生跳转但是url 不发生变化相关推荐

js页面重定向跳转代码总结（待续）
情形一:东八区,浏览器中文跳转 <script type="text/javascript"> var sLang = (navigator.language ? na ...
JAVA怎么实现网页退出系统_java后台实现js关闭本页面,父页面指定跳转或刷新操作...
关闭本页面,跳转到百度 response.setCharacterEncoding("gbk"); PrintWriter out=response.getWriter(); ou ...
HTML页面之间跳转与传值（JS代码）
HTML页面之间跳转与传值(JS代码) 跳转的方法如下: 方法一: window.location.href = "b.html"; 方法二(返回上一个页面,这个应该不算,先放在这 ...
js layui跳转页面_【WEB前端开辟】layui的iframe跳转链接与页面按钮跳转相干引见...
一.导航跳转iframe页面题目: 引荐:layui教程关于layui的iframe嵌套页面的导航跳转页面题目,如下图所示能够看到结果: 在模板页的导航代码: 一切商品商品列表商品属性商品分类 ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
JS返回上一页-JS返回下一页-JS页面跳转
JS返回上一页-JS返回下一页-JS页面跳转 Javascript 返回上一页: 1. history.go(-1), 返回两个页面: history.go(-2); 2. history.back( ...
js页面跳转和js对iframe进行页面跳转、刷新
js页面跳转和js对iframe进行页面跳转.刷新一.js方式的页面跳转 1.window.location.href方式 <script language="javascr ...
js页面跳转和 js打开新窗口方法
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...
js实现页面自动跳转
本文导读:自动转向,也叫自动重定向.自动跳转,指当访问用户登陆到某网站时,自动将用户转向其它网页地址的一种技术.转向的网页地址可以是网站内的其它网页,也可以是其它网站.通常情况下,浏览器会收到一个网页 ...

JS 页面发生跳转但是url 不发生变化

iframe实现：

a标签：

window.location.href实现：

ajax实现：

JS 页面发生跳转但是url 不发生变化相关推荐

最新文章

热门文章