首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在父页面上使用返回按钮,而不是在iframe中

使用返回按钮。

在父页面上使用返回按钮,而不是在 iframe 中使用,可以通过以下几种方式实现:

  1. 使用浏览器历史记录:可以通过 JavaScript 中的 history 对象来实现页面的前进和后退操作。通过调用 history.back() 方法可以模拟点击浏览器的返回按钮,返回到上一个页面。
代码语言:txt
复制
function goBack() {
  history.back();
}
  1. 使用 JavaScript 跨文档通信:如果 iframe 内嵌的网页和父页面在同一个域名下,可以通过 JavaScript 的 postMessage 方法进行跨文档通信。在 iframe 页面中发送消息给父页面,然后父页面接收到消息后执行相应的操作,如返回操作。

父页面中的代码:

代码语言:txt
复制
window.addEventListener('message', function(event) {
  if (event.data === 'goback') {
    history.back();
  }
});

在 iframe 页面中发送返回消息给父页面:

代码语言:txt
复制
function sendGoBackMessage() {
  parent.postMessage('goback', '*');
}
  1. 通过自定义事件:使用 JavaScript 中的自定义事件机制,可以在父页面中监听到事件并执行相应的操作。

父页面中的代码:

代码语言:txt
复制
document.addEventListener('goback', function() {
  history.back();
});

在 iframe 页面中触发自定义事件:

代码语言:txt
复制
function triggerGoBackEvent() {
  var event = new Event('goback');
  parent.document.dispatchEvent(event);
}

以上是几种常用的方法来实现在父页面上使用返回按钮而不是在 iframe 中使用。具体使用哪种方法,可以根据实际情况来选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

php layer弹出层更改背景,详解Layer弹出层样式

不是!!...layer如何获取界面的元素,比如我点击新增按钮layer框编辑后提交,是如何关闭当前layer框,额,关闭layer框很简单,但是如何关闭后根据界面的form表单向后台发起Ajax请求,,刷新信息...即:layer子界面如何调用界面的方法。 如果你不想使用Layui,只是想使用layer,你可以去layer独立组件官网下载组件包。...当你页面一打开就要执行弹层时,你最好是将弹层放入ready方法: //页面一打开就执行弹层 layer.ready(function(){ layer.msg(‘很高兴一开场就见到你’);...body.find(‘input’).val(‘Hi,我是从父来的’) } }); layer.getFrameIndex(windowName) – 获取特定iframe层的索引 此方法一般用于

3.9K20
  • vivo 商品台的可视化微前端实践

    不是仅限于当前团队的业务使用。...设计商品台的前端系统时,我们使用了微前端和可视化技术,其可以达到如下效果: 可视化技术可以让各个业务方的运营等相关人员,直观的看到其配置的数据面上的展示效果; 微前端可以帮助商品台更快更好的适配到各个业务方的项目中...这是因为 vue 的单例机制,子窗口(商品管理)由窗口(商品管理) new Vue 渲染的, 因此子窗口中使用 use 、 filter 、 mixin 、 全局指令 、 全局组件等, 会覆盖窗口...同时返回 SandboxVue 。即可得到一个干净的沙箱 vue 。 注意:这里的 vue 指的是 vue2 ,目前 vue3 不是单例机制, vue3 是不需要沙箱 vue 的。...原因:iframe 预览页面为商品台域名,子应用接入主应用后为主应用域名,从而导致跨域。

    1.1K50

    记录工作遇到的各种问题(Bug,总结,记录)

    AjaxFileUpload插件的上传文件处理方式是,获取返回的实体内容,直接进行eval 解析,解析失败,报错,则无法上传 ?...页面中有iframeiframe里面有分页按钮页面对iframe做加载之后监听iframe中点击事件的操作,初始第一正常,但点击第二之后事件就失效了 原代码: ?...,然后才跳到链接 解决办法一:链接的后端路由代码,判断是否登陆时,增加对微软的访问头部字段检测,如果是,则直接返回over即可 PHP if (isset($_SERVER['HTTP_USER_AGENT...然后该独立窗口的DevTools中使用快捷键(Ctrl+Shift+J)打开即可 ?...设置picker的选择文件按钮后,时常点击无效(并不是重复选择文件、按钮初始被隐藏的无效)。

    18K12

    油猴脚本从编写到检测

    那么脚本就设置列表进行 为了直观显示,将在列表创建一个iframe用来显示爬取的详情 模拟用户去点击每一个商品操作,这样子做轮询 实现 列表:获取当前的页面,获取商品数,获取每个商品的链接...= 0)now_car_info_i[0].parentNode.removeChild(now_car_info_i[0]); //调用删除iframe var iframe =...所以如果要对脚本进行检测,没有像上面代码这样子向页面植入iframe的话,通过去检测dom和window是无法检测出使用油猴脚本的。...检测方法一 通过鼠标点击事件检测,正常的用户使用鼠标点击按钮会有一个坐标,但是动过click()函数进行的点击操作是没有坐标的。...click()进行点击 检测方法二 使用isTrusted事件进行识别,这个事件可以判断是否是人进行点击或者是js模拟点击,当是手动点击会返回true,否则会返回false Js代码如下: document.querySelector

    4.9K10

    利用 target=_blank 进行前端钓鱼

    新窗口打开是后退按钮变得不可用。 用户更加期望新页面在当载入 ---- 以上,并不是我们讨论的重点!作为安全公司,我们关注重点在于安全、安全、安全!...等你回到那个钓鱼页面,已经伪装成登录,要求输入登录凭据。你可能不会注意到这一点,因为焦点位于新窗口中的恶意页面上重定向发生在后台。...稀里糊涂把账号密码输进去了~ parent 与 opener 中提供了一个用于父子页面交互的对象 window.parent,我们可以通过该对象来从框架的页面访问级页面的 window...新打开的窗口,可直接使用 window.opener 来访问来源页面的 window 对象 浏览器提供了完整的跨域保护,域名相同时,parent 对象和 opener 对象实际上就直接是上一级的 window...防御 代码控制 直接使用 sandbox 属性 noreferrer 可以使用 标签的 rel 属性来指定 rel="noreferrer" 来隐藏 referer <a href

    1.2K20

    讲一讲Web开发的跨域

    最常见到的跨域「问题」是这样: 我有一个域名a.com和一个域名b.com 我a.com上有一个接口a.com/api,会返回一些数据 我想在b.com域名下的一个页面上访问a.com/api得到数据...JSONP实现在zhuanlan.zhihu.com下跨域拿到这个数据,需要做的是: 改造这个api,让他返回一段js代码不是json数据。...实现原理可以如下: 假如支付宝有一个页面,页面上按钮点击是转账1000元给kindJeff 我把这个页面作为一个iframe放在a.com的网页上 我把这个iframe设置为透明,它的按钮位置下面放置一个可以看见的...「下一按钮 你看见我的网页,毫无防备地点击了下一,实际上点击的位置是转账按钮 这种「跨域」也有类似CORS的控制方式,即X-Frame-Options响应头。...表示该页面可以指定来源(uri)的 frame 展示。 发现网页iframe里,且X-Frame-Options响应头的值不符合要求,浏览器不会加载这个iframe

    1.1K40

    解读selenium webdriver

    自然语言框架/工具(Cucumber)可能作为上图中那个测试框架框的一部分存在,也可能将测试框架完全包裹在自己的实现。...要使用新窗口,您需要切换到新窗口。如果你只打开了两个标签或窗口,并且你知道你从哪个窗口开始,通过消除过程,你可以WebDriver能看到的两个窗口或标签上循环,并切换到不是原来的那个窗口。...您不需要切换就可以使用新窗口(或)标签。如果你有两个以上的窗口(或)标签被打开,不是新窗口,你可以WebDriver可以看到的两个窗口或标签上循环,并切换到不是原来的那个窗口或标签。..." src="https://seleniumhq.github.io"> Click here 如果不是iframe,我们可能会使用以下操作来点击按钮...如果名字或ID面上不是唯一的,那么第一个找到的名字将被切换到。

    6.6K30

    php生成静态页面并实现预览功能

    一、前言 这篇文章主要是记录一下php生成静态页面的大致步骤,关于页面静态化,大家想必都听说过,但是真正用的时候反而不是很多。...因为我们的参数随时可以变化,所以页面上的内容也跟着参数变化,这就是动态化的页面。与之相反,静态化就是纯粹的html,页面上的内容不需要通过php或者java等编程语言来改变。...2、静态化写法 (1)第一种写法是通过ob_start()缓存来输出 php文件编写html代码,然后用bo_get_content获取到,然后输出到html文件,类似于: <?...(2)提前写好模板,然后进行替换 先准备好静态文件,然后把要替换的部分标出来,{title},php程序中用file_get_content获取html文件的内容,然后进行替换,替换之后保存为文件...三、生成预览 生成html之后,一般来说是需要预览给工作人员看看的,毕竟人家也不懂技术,不知道到底生成的是啥 1、使用dialog打开窗口 静态: //这是我们要打开的窗口,先隐藏 <div id="

    1.7K20

    基于iframe的跨域与更新窗体地址栏的解决方案

    这样代码可以设定iframe的src,来接入运维平台的页面。...但有一个前提,src和你的窗口的地址必须是同源的,也就是不能跨域。 但实际上管理平台的页面和运维平台的页面并不是同源的,所以首先要解决的是跨域问题。...这样每次iframe内部的src发生变化后,都会相应修改窗体的地址栏,但又不会去刷新当前页面,效果上看起来就像是自己的页面操作,感受不到跨站点的问题。...每次刷新页面,页面初始化时,就根据当前窗体的地址栏的url去得到属于运维平台的location.search值,用这个值修改iframe的src值,达到每次刷新页面,都可以根据当前地址栏的url,...以此可以保证了再刷新页面后,可保持在上次打开的页面,这样便于分享链接、使用回退、前进按钮

    14.3K1350

    浏览器分页静默打印

    然而,实际上的需求往往都不是这样简单,它更多的可能是需要打印整个网页的某一段“特定”的内容。 一、如何自定义打印 Google 一下就能能网上找到与很多与自定义打印相关的 js 库。...二、使用 iframe 打印 Iframe打印其实最终也是调用了浏览器apiwindow.print()进行打印的。...mustache模板语法进行渲染(需要和html模板字符串模板一致,可以使用其他模板 handlebars) const printHtml = mustache.render(htmlStr, data...当然不会,实际需求还有更复杂的打印场景,比如当打印报表。 打印报表的时候就会涉及到页眉、页脚、分页等等。...当我们浏览器页面上点击一个打印按钮的时候,直接通过 Websocket 将打印事件、打印文本及其他相关打印信息发送给打印控件服务。 打印控件接收到请求之后再调用电脑的打印功能,调用打印机即可。

    57110

    Selenium WebDriver找不到元素的三种情况

    其实呢是操作的过程页面发生了变化,刷新了,虽然表面上看起来两个元素长得一模一样,事实上是每一个元素都有自己的一个ID号。 用代码(Python)来证明!...比如:一排分页按钮,你点击下一跳转到了第二,想要还用原来的元素操作到下一,那也是不可能的了。...有一个四个菜单,分别要去带四个传入的数据点击四次,检查是否能到另外一个页面,页面返回是否正常。...我就使用了一个循环,但是最开始没细看,直接循环成了元素,到新页面验证完成之后又返回原来的页面继续定位,发现定位不了了;这时我才想起来不应该循环元素,应该循环元素的个数,在这个循环的过程再来定位获取元素...这个需要增加一定等待时间,显示等待时间可以通过WebDriverWait 和util来实现 添加固定的休眠时间,引入time包 这个只能大概估算一下,给个固定值,不是很推荐使用这个,不灵活。

    5.2K50

    真正解决iframe高度自适应问题

    iframe的高度始终等于嵌入页面内容的高度,不是屏幕的高度 右侧不允许出现两个滚动条 iframe的高度自适应不仅仅是指刚加载进来时,也有可能嵌入内容的高度会随点击变化(:下拉菜单,左侧导航栏等...) 页面可能同时嵌入多个iframe 2.contentWindow对象 *需要起个服务,不要直接在本地打开 这是个只读属性,返回指定的iframe的window对象 拿到这个对象,就可以根据正常网页的方法拿到嵌入...2.本文flexiframe.js可以直接使用,但是只支持同源下页面可以通过contentWindow获取子页面的内容高度,跨域的下次再说。...3.欢迎指出问题或留言加深本文的深度,例如html5已经不需要声明DTD,但是我解决这个问题不得不改一下DOCTYPE,退化到html4,为什么html5子页面html和body的高度不是由内部的内容决定的...,而是等于元素iframe的高度?

    5.1K30

    前端之HTML和CSS

    ,注释是对代码的说明和解释,注释的内容不会显示面上,html代码插入注释的方法是: 常用html字符实体   代码成段的文字,如果文字间想空多个空格,代码中空多个空格,渲染成网页时只会显示一个空格,如果想显示多个空格,可以使用空格的字符实体,代码如下...标签语义化   布局需要尽量使用带语义的标签,使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构,提高网站在搜索的排名(也叫做SEO),其次是方便代码的阅读和维护。...CSS盒子模型 盒子模型解释    元素页面显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下: ?   ...面 上面的iframe窗口,缺省显示001.html页面,

    4.3K30

    谈谈html中一些比较偏门的知识(map&area;iframe;label)

    可以访问菜鸟教程搜索框输入相应的标签进行搜索查看!...关于link:   ps:上述这行代码:设置标签的图标(头像),href属性值后缀可以为...:各顶点坐标;如果第一对坐标与最后一对坐标不一致,浏览器会添加一对坐标进行闭合图形 6.如何在面上实现一个圆形的点击区域: map+area或者svg border-radius 纯js实现:首先判断一个点在不在圆上面...,获取鼠标坐标 7.a标签书签形式: 最常见效果:返回顶部 顶部 返回顶部 8.iframe语法:可以同一个浏览器窗口显示多个页面...iframe和主页共享连接池,浏览器对相同的域连接有限制,会影响页面的并行加载; 9.label标签:定义表单间控制关系,当用户点击标签时,浏览器会自动将焦点转到相应的表单控件上。

    3.1K60

    如何设计H5编辑器的模版库并实现自动生成封面图

    章节概要 H5编辑器的模版库设计基本思路 如何实现iframe子页面和页面通信 基于dom元素自动生成封面图解决方案 正文 作为一名前端工程师, 解决项目问题是我们的基本职责之一, 我们可以利用已掌握的知识去解决项目开发的问题和需求...H5编辑器的模版库设计基本思路 我们都知道H5编辑器的页面呈现大多是基于json schema, 每一个组件我们都可以细化为一个json元数据, 这样做是为了我们能更细粒度的控制组件, 模版, 即是由很多组件组合而成的区块或者完整的页面...所以对应的方案就是我们给用户提供一个保存模版的按钮, 当用户点击保存之后我们只需要拿到当前配置的json数据, 保存到对应的数据库即可....如何实现iframe子页面和页面通信 在上文的介绍我们选择了使用canvas + iframe技术来实现页面截图, 我们先来看看实现效果: 由上图可知 我们提供给用户两种设置封面的方法: 使用默认图片...用户可以用Dooring提供的默认封面也可以直接使用生成的预览封面.图二其实弹窗内是iframe, 笔者设计了一种机制使得iframe内容渲染完成之后自动截图上传给服务端, 然后iframe页面通信将图片

    1.2K61
    领券