场景案例:页面跳转加载页面。本页面隐藏了跳转后页面所要展示的数据(参数),但此时不能使用get提交方式,将数据(参数)暴露在状态栏。
解决方案:通过js,模拟表单from,post方式提交,将参数传递跳转页面的后台
效果图:
点击其中的图片跳转业绩详情页
此时跳转后的页面所展示的数据,是通过列表页表单的post方式提交,因此可以完全不通过get方式在状态栏上暴露参数进行传递。
代码:
html:
<ul class="bus_list">
<li onclick="goCpi(this)" data-url="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/c93c2e9e22feae07792cf281001a95e4.png&fileName=c93c2e9e22feae07792cf281001a95e4.png" data-content="123456">
<img src="https://test-resource-ng.ouyeel.com/statics/S3WL?path=public_oyzg/c93c2e9e22feae07792cf281001a95e4.png&fileName=c93c2e9e22feae07792cf281001a95e4.png">
<div class="bus_title">
<p>66</p>
</div>
</li>
</ul>
js:
function goCpi(obj) {
var imgSrc=$(obj).attr("data-url"); //获取图片参数
var con=$(obj).attr("data-content");//获取内容参数
var type=$("#type").val();//状态栏展示type参数(该参数不重要,因此不用隐藏)
var num=$("#num").val();//状态栏num参数
var company=$("#company").val();//状态栏company参数
var tempForm = document.createElement("form"); //创建form表单
tempForm.id = "tempForm1";//设置表单属性id=“tempForm1”
tempForm.method = "post";//设置method提交方式为Post
tempForm.action =jump_url + '/business/cpi?type='+type+"&num="+num+"&company="+company; //页面跳转url(url上的参数是通过get提交)
tempForm.target = name; // _blank - URL加载到一个新的窗口
var hideInput = document.createElement("input"); //创建input隐藏域
hideInput.type = "hidden";//type类型为hidden ,隐藏参数
hideInput.name = "imgSrc"; // 设置隐藏域的name属性为imgSrc (name="imgSrc")
hideInput.value = imgSrc; //设置隐藏域的value值 (图片url)
tempForm.appendChild(hideInput); //赋值所有元素
// 以下是跳转页面需要的第二个参数,方式和相同,如果多个参数,依次创建多个隐藏域
var hideInput = document.createElement("input");
hideInput.type = "hidden";
hideInput.name = "content";
hideInput.value = con;
tempForm.appendChild(hideInput);
if(document.all){ // 兼容不同浏览器
tempForm.attachEvent("onsubmit",function(){}); //IE
}else{
tempForm.addEventListener("submit",function(){},false); //firefox
}
document.body.appendChild(tempForm);
if(document.all){ // 兼容不同浏览器
tempForm.fireEvent("onsubmit");
}else{
tempForm.dispatchEvent(new Event("submit"));
}
tempForm.submit(); //表单提交
document.body.removeChild(tempForm);
}