js打开新窗口时隐藏掉地址栏的解决方案

最新推荐文章于 2024-09-19 17:21:41 发布

L_ukly

最新推荐文章于 2024-09-19 17:21:41 发布

阅读量1.1w

点赞数 2

分类专栏： js 文章标签： js html javascript

本文链接：https://blog.youkuaiyun.com/L_ukly/article/details/111563221

版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在使用window.open时隐藏URL参数的方法，通过创建空白页并利用iframe的srcdoc属性来展示内容，以此来解决因URL参数可见带来的安全问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、问题？
二、解决思路
- 1.修改window.open参数
- 2.跳转空白页，由空白页初始化时使用ajax跳转页面
总结

前言

今天在项目中发现一个前端的js问题，使用window.open打开新的窗口时浏览地址，但是传了一些关键的主键参数不能隐藏，因此引出了一系列的安全问题。

一、问题？

用户在使用的过程中不小心改变了地址栏的主键ID却带出其他用户的信息

二、解决思路

由于项目安全等级不是非常的高，所以这里主要描述简单的处理方式

1.修改window.open参数

 window.open(url,'location=no','',false);

location=yes|no|1|0 是否显示地址字段.默认值是yes
经测试crome浏览器支持不显示地址栏。只是地址栏的变为不可修改（百度其他浏览器也不显示，有时间可以测试一下）

当然window.open还有很多其他属性: window.open详细参数.

2.跳转空白页，由空白页初始化时使用ajax跳转页面

url为空白页地址
window.open(url,'location=no','',false);

这里发现了另外一个问题就是ajax调用接口时返回的是完整的Html界面。发现没有办法在当前空白页渲染。
尝试过直接将返回的结果写入到body中去，但是界面无法解析。
后来尝试使用内联框架 ifram 标签。直接将结果写入到ifram标签中去依旧无法解析，google了一下ifram的属性设置，找到 srcdoc属性（规定在 iframe 中显示的页面的 HTML 内容。）直接将返回的完整的html赋值给scrdoc属性可以解析HTML

内联标签ifram详细属性: iframe内联框架详细参数.

完整的空白界面如下。因为没有使用了具体的参数传值所以在每次跳转空白界面时将选中的值隐藏在父窗口。然后再使用window.opener方法获取到父窗口当前选中的ID然后保存到当前窗口，刷新时在当前窗口获取ID 。避免刷新当前窗口之前打开其他的窗口导致父窗口的隐藏ID被修改导致数据错乱，

<html>
<head>
    <script type="text/javascript">
        var loadingShow = true;
    </script>
</head>
<body style="overflow: hidden;">
<input hidden id="id" value="">
<iframe style="width: 100%;height: 100vh" srcdoc="" id="iframe">

</iframe>

<script>
     $(function () {
     	 // 当前界面没有值时才去父窗口获取ID 否则刷新当前ID(避免当前窗口未关闭 再打开新窗口返回刷新当前窗口获取到其他ID)
     	 var id =  $("#id").val();
     	 if(typeof (id ) == "undefined" || id == null || id === "" || id == 'null'){
     	 	// 从父窗口中获取选中ID
         	id =  window.opener.document.getElementById("tbPatientId").value;
         	// 将选中的父窗口的ID值保存在当前窗口
         	$("#id").val(id);
     	 }
         // 实际跳转的html界面的url
         var url = "~~~~?id="+id;
         openUrl('id','',url,'');
     })

    /**
     * 打开页面
     */
    function openUrl(id, name, url, refresh) {
        $.ajax({
            url: url,
            method: "GET",
            success : function(data) { // ajax返回的数据
                $("#iframe").attr("srcdoc",data);
            }
        });
    }
</script>
</body>
</html>