html页面中嵌套iframe网页时，如何真正返回到上一个页面

穆帅通

已于 2024-03-25 10:29:46 修改

阅读量1.8k

点赞数 3

文章标签： html 前端

于 2024-03-25 10:09:54 首次发布

本文链接：https://blog.youkuaiyun.com/mu904205481/article/details/137006169

版权

本文讨论了如何使用`document.referrer`属性替代`history.back(-1)`，指出前者在用户直接访问时可能为空，并强调它仅返回一个字符串，不适用于直接引用页面DOM。同时，文中提到了`goback()`函数，用于设置`window.location.href`为`document.referrer`实现类似后退功能。

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

1.使用document.referrer代替history.back(-1) 返回

Document.referrer 返回的是一个 URI, 当前页面就是从这个 URI 所代表的页面跳转或打开的.

如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。
在中，Document.referrer 会初始化为父窗口Window.location的href。

goback(){

		window.location.href = window.document.referrer;
	}

原文链接：https://blog.youkuaiyun.com/Octopus21/article/details/120298930

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

穆帅通

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用webdriver实现主页面跳转到子页面后又回到主页面的操作

01-12

使用webdriver实现主页面跳转到子页面后又回到主页面的操作

由iframe引起的无法返回上一页的问题

qq_43851684的博客

09-20

2954

使用的框架: vue页面里面嵌套了 iframe，在设置iframe的src后，不知道为什么使用 router.back() 无法跳转到上一页，必须使用 router.go(-2) 才可以。但问题是有的时候用 router.go(-1) 可以，有的时候却不行。因为iframe里面的内容对于我来说是黑盒，在内部可能进行了重定向操作而我不知道。

参与评论您还未登录，请先登录后发表或查看评论

iframe内嵌的页面可能修改样式嘛

热门推荐

路上

10-15

2万+

1.问题所在后台采用iframe的方式去写的当用户点击浏览器的返回上一级就会让页面回到登录页面。 2.想要实现效果当用户点击上一级的时候只会让iframe里面的内容去返回上一级而不是整个iframe返回 3解决问题方案 3.1第一种解决方案首先我想到的是给代码加一个返回上一级按钮轻松实现代码如下 <span onclick="back()">返回上一级&...

解决iframe高度自适应问题；iframe更改了src后，父页面history.back只能后退iframe而不能使自己后退问题

木辰風的博客

01-09

1343

iframe <iframe id="main" name="main" frameborder="0" width="100%" scrolling="auto" :src="iframeUrl" onload="setIframeHeight()"></iframe> 重置iframe高度函数 function setIframeHeight () { //初始不执行 try { vm.timer; ...

vue中用iframe嵌套页面，点击返回实现真正的退回上一步功能

zuo-yiran的博客

06-27

1万+

vue项目中需要嵌套第三方的页面，但是第三方页面中的网页没有返回按钮，如图所示：此为页面b，页面a为跳到b页面的前一个页面。点击iframe嵌套页面跳转的第二个页面要实现不管进入多少层iframe页面，点击回退都直接跳到页面a. 实现：为了不影响路由判断，使用回退的方法。首先在进入页面b时，记录一下history.length，并把这个值赋给页面的一个变量： data () { ...

使用iframe框架后的页面，执行跳转命令，目标页面内嵌至iframe的子页面的解决方法

坤的博客

05-14

1316

追梦的蚂蚁。https://blog.youkuaiyun.com/m0_37768843/article/details/83342530 问题描述：在做项目的过程中，需要完成修改密码后重新登录的功能，但是前端页面使用了IFrame的框架，修改页面内嵌在的index.html中重新登录的页面就内嵌到原来的页面中前端用的是layui 后台使用的shiro做的安全控制 password.jsp <%@ page isELIgnored="false" %> <%@ page content.

iframe 返回上一页_doc88 文档下载上

weixin_39700215的博客

11-30

148

最近找一些国外的压力容器方面的资料。美帝在这方面耕耘上百年，各种文档标准非常齐全。当然买肯定是买不起的了，那怎么办？经过一番搜索，doc88上面东西不少。阅读还是可以的，但是想弄下来。怎么办？### 摸索- 小试牛刀F12![image.png](https://upload-images.jianshu.io/upload_images/3797605-7c41a0089ed7f908.png?...

html页面中使用 JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面

代码讲故事

02-11

3182

JS 返回上一页及返回上一页并刷新，iframe中打开指定页面，跳转到指定页面。常用方法： window.history.go(-1); //返回上一页 window.history.back(); //返回上一页 //如果要强行刷新的话就是：window.history.back(); //刷新当前页 window.location.reload(); window.location.go...

vue中用iframe嵌套页面（跳转第三方），点击返回实现真正的退回上一步功能

乔的博客

02-09

4772

<iframe :src="`http:*****`" frameborder="0" scrolling="auto" width="100%" height="100%" style="overflow-y:scroll;"></iframe>

JS实现返回上一页并刷新页面的方法分析

12-08

本文实例讲述了JS实现返回上一页并刷新页面的方法。分享给大家供大家参考，具体如下：正常情况下我们通过 history.back() 或者 history.go(-1) 返回上一级页面的时候，是不会刷新页面的。这种不刷新页面包含两种情况：在 android 或者 pc 浏览器中看到的页面有刷新的效果，其实不是这样的，这个时候的所有的资源都是从缓存中加载来的。我们通过浏览器调试工具可以看到 from disk cache 或者 from memory cache。在 ios 中甚至于返回到了上一页后，连上一页的脚本文件都没有执行; (其实不是没有执行，是执行了onpageshow)

在vue中实现嵌套页面(iframe)

11-19

vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...

div嵌套html不用iframe

09-28

在网页设计和开发中，有时候我们需要在不使用`iframe`元素的情况下将一个页面的内容嵌入到另一个页面中。`iframe`虽然提供了这种功能，但有时可能会带来一些问题，如加载速度慢、SEO优化困难等。在这种情况下，我们...

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法

09-28

就想弄一个winform结合html5的一个小东西，突有心血来潮，想在里面嵌套一个微信网页版，下面小编给大家介绍下HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法，一起看看吧

js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

10-27

frame和iframe元素常用于在一个HTML页面中嵌入其他HTML文档，形成多窗口的效果。每个frame或iframe就像一个独立的窗口，可以加载不同的HTML内容。 1. **通过索引引用**：可以通过它们在frames数组中的位置来引用，...

用postMessage实现两个html页面之间的通信（使用iframe嵌套的两个html页面）

kuer20124的博客

11-09

621

用postMessage实现两个html页面之间的通信（使用iframe嵌套的两个html页面）

如何让iframe中的页面后退到上一页

tlcjbl的博客

01-13

3476

如何让iframe中的页面后退到上一页 window.parent.history.back(-1);

iframe 内容返回上一级

qq_37672347的博客

10-14

642

前提是在live-server 服务器上本地不行方法一：方法二：方法三：方法四：方法五：（此方法无效）

Vue页面向嵌套的iframe中的html页面传值

04-01

由于浏览器的安全限制，Vue页面无法直接向嵌套的iframe中的html页面传值。但是可以通过以下方式实现： 1. 使用postMessage 在Vue页面中使用postMessage向iframe发送消息，iframe中的html页面监听message事件，接收消息并进行处理。 Vue页面： ```javascript // 发送消息到iframe const iframeWindow = document.getElementById('iframe').contentWindow; iframeWindow.postMessage({data: 'hello'}, '*'); // 监听iframe返回的消息 window.addEventListener('message', (event) => { if (event.origin !== 'http://iframe-origin.com') return; // 验证消息来源 console.log(event.data); // 处理返回的消息 }); ``` iframe页面： ```javascript // 监听消息 window.addEventListener('message', (event) => { if (event.origin !== 'http://vue-origin.com') return; // 验证消息来源 console.log(event.data); // 处理接收到的消息 }); // 发送消息到Vue页面 const parentWindow = window.parent; parentWindow.postMessage({data: 'world'}, 'http://vue-origin.com'); ``` 2. 使用URL参数在Vue页面中嵌套iframe时，可以在iframe的src属性中添加参数，iframe中的html页面可以通过URL参数获取传递的值。 Vue页面： ```html <iframe src="http://iframe-origin.com?data=hello"></iframe> ``` iframe页面： ```javascript // 获取URL参数 const urlParams = new URLSearchParams(window.location.search); const data = urlParams.get('data'); console.log(data); // 处理获取到的值 ``` 需要注意的是，使用URL参数传递数据时，需要考虑参数的安全性，避免出现安全漏洞。