记一次老项目中的跨页面通信问题和前端实现文件下载功能

徐小夕 等级 708 0 0

由于笔者之前维护了几个比较老的项目是用jquery全家桶开发的,其中有些需求是需要跨页面交互和父子页面通信,故借此总结一下。另一块是前端实现文件下载功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面下的应用场景还是很多的。

记一次老项目中的跨页面通信问题和前端实现文件下载功能

文章摘要

  • 实现页面之间通信的方法
  • 实现父子页面和子页面与子页面之间通信的方法
  • 前端实现文件下载功能

由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react,angular方面的技术问题,可以移步我的其他文章),所以让我们用原生javascript来解决我们上面提到的问题吧。

正文

1. 实现页面之间通信的方法

虽然我们使用postmessage也可以实现页面通信,但这里我们主要使用window.opener这个API,MDN对它的解释如下:

The Window interface's opener property returns a reference to the window that opened the window using open().

意思就是window提供的opener接口返回一个打开当前页面的页面的一个引用,换句话说,如果A页面打开B,那么B页面的opener将返回A。通过这种方式,我们可以在A页面定义全局的方法挂载在window上,那么B页面就可以通过opener拿到A页面的方法从而控制A页面的行为。

目前主流的浏览器对这个API支持的都比较好,所以我们在大部分场景下可以考虑使用这个API。

为了更方便的理解他的应用场景,我们这里实现一个小功能:我们定义两个页面,A,B,当A页面打开B页面的时候,用B页面改变A页面的背景色。 代码如下:

// A页面
<body>
    <h1>父页面A</h1>
    <a href="./b.html" target="_blank">打开b页面</a>
    <script>
        function changeColor(color) {
            document.body.style.background = color
        }
    </script>
</body>

// B页面
<body>
    <h1>父页面B</h1>
    <script>
        window.opener.changeColor('blue')
    </script>
</body>

首先我们在A页面里定义一个全局方法,当点击a标签跳转到新开的B页面时,B页面就是通过opener,调用A定义的changeColor,并传入参数给A页面,从而改变A页面的背景色。效果如下:

记一次老项目中的跨页面通信问题和前端实现文件下载功能

记一次老项目中的跨页面通信问题和前端实现文件下载功能

记一次老项目中的跨页面通信问题和前端实现文件下载功能

2.实现父子页面和子页面与子页面之间通信的方法

父子页面这里主要针对iframe而言,即iframe和父页面以及iframe页面之间的通信。比如下图:

记一次老项目中的跨页面通信问题和前端实现文件下载功能 我们想实现父页面A操控子页面A,B,并且让子页面和父页面交互,这里我们主要使用 iframe的

  • contentWindow
  • parent.window 通过contentWindow,我们可以拿到iframe内部的方法和dom元素,进而可以操控iframe页面

首先我们来看看父页面操控子页面的场景:父页面A调用子页面的方法传递一条数据,并并显示在子页面中:

// 父页面
window.onload = function() {
    let iframe1 = $id('a1').contentWindow;
    // 控制子页面dom
    iframe1.document.body.style.background = "#000"
    iframe1.loadData({a: '1'})
}

function $id(id) {
    return document.getElementById(id)
}

// 子页面
function loadData(data) {
    document.body.append(`父页面的数据数据${data.a}`)
}

由上可知,父页面通过contentWindow拿到iframe的window对象从而向其传递数据并调用其方法。

同样,子页面也可以操控父页面:

// 父页面
function $id(id) {
    return document.getElementById(id)
}
// 子页面
parent.window.$id('bridge').innerHTML = '子页面操控父页面dom'

从代码可以看到,我们使用parent.window拿到父页面的window,然后调用父页面提供的$id方法来操作父页面dom。

记一次老项目中的跨页面通信问题和前端实现文件下载功能

接下来我们来解决子页面和子页面通信的问题,其实方法在上面已经提到了,我们可以把父页面作为一个桥梁,子页面A通过parent.window拿到父页面的window,进而可以获取另一个子页面B的dom,这样我们就可以让子页面A操作子页面B了,反之也是一样的。

// 子页面A
let iframeBWin = parent.window.$id('a2').contentWindow
iframeBWin.onload = function() {
    iframeBWin.document.getElementById('show').innerHTML = "来自子页面A的问候"
}

由上面代码我们可以知道,我们通过parent.window来拿到子页面B进而实现和子页面B通信的目的,通过这种方式,我们可以实现很多有意思的东西。

记一次老项目中的跨页面通信问题和前端实现文件下载功能

注意,我们所讨论的这些方法都是基于同域下的,其实实现跨域的方法也有很多,比如使用中间iframe实现桥接,通过设置window.domain将window提高到顶层等等,不过实现起来还是有些坑的,不过大部分场景都能满足。

4.前端实现文件下载功能

对于下载文件来说,大部分场景都是后端来实现,前端只需要请求接口就好了,但是有时候这种方式反而会占用多余的资源和带宽,如果需要下载的是用户自己生成的内容或者内容已经返回到客户端了,这时候能不经过服务端而直接生成下载任务,能节省不少的资源和时间开销。

一般来说前端实现的思路就是通过动态创建a标签,设置其download属性,最后删除a就好了,对于不是图片的文件一般都可以下载,但是如果是图片,有些浏览器会自动打开图片,所以我们需要手动把它转化为data:URLs或blob:URLs,基于这个原理,我们可以用fileReader,也可以用fetch-URL.createObjectURL,这里经过大量测试我采用后者:

function download(url, filename) {
    return fetch(url).then(res => res.blob().then(blob => {
        let a = document.createElement('a');
        let url = window.URL.createObjectURL(blob);
        a.href = url;
        a.download = filename;
        a.click();
        window.URL.revokeObjectURL(url);
    }))
}

该方法传入一个文件的地址和希望使用的文件名,这样,我们就能优雅的使用它来实现下载了。

最后

由于笔者最近在写开源的CMS系统,技术架构:

  • 后台Node+Koa+redis+JsonSchema
  • 管理后台界面 vue-cli3 + vue + ts + vuex + antd-vue + axios
  • 客户端前台 react + antd + react-hooks + axios

后面将推出该系统的设计思想,架构和实现过程,欢迎在公众号《趣谈前端》里查看更详细的介绍。

欢迎大家相互学习交流,一起探索前端的边界。

更多推荐

收藏
评论区

相关推荐

记一次老项目中的跨页面通信问题和前端实现文件下载功能
由于笔者之前维护了几个比较老的项目是用jquery全家桶开发的,其中有些需求是需要跨页面交互和父子页面通信,故借此总结一下。另一块是前端实现文件下载功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面下的应用场景还是很多的。 (https://imghelloworld.osscnbeijing.aliyuncs.com/im
JavaEE从服务器端解决Ajax跨域问题
1、Ajax跨域简介   1、指的是浏览器不能执行其他网站的脚本。是浏览器施加的安全限制。js本身不跨域,使用form表单和iframe直接请求,是不会跨域的;   2、只要两个url的协议、域名、端口其中有一个不同,从其中一个url中使用ajax请求另一个url,则属于Ajax跨域;   3、ajax请求接口,只是不能进入回调函数,接口还是可以正常请
Nginx解决跨域问题(CORS)
前言 == CORS(Cross-Origin Resource Sharing) 跨域资源共享,是一种允许当前域(domain)的资源(比如html/js/web service)被其他域(domain)的脚本请求访问的机制,通常由于同域安全策略(the same-origin security policy)浏览器会禁止这种跨域请求。  如:a.c
Angular2+ iframe跨域调用父页面js
**业务场景:列表页面添加一个导入功能,该导入功能由第三方页面提供,导入完成后需要通知主列表刷新数据。** **先来看看iframe跨域调用父页面的实现逻辑(以postMessage方式为例)** **_(postMessage介绍:[https://developer.mozilla.org/zh-CN/docs/Web/API/Window/pos
AnyChart使用JavaScript构建箱形图
[AnyChart](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F1009)是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知
AnyGantt创建基本的Venn Diagram(维恩图)教程
[AnyGantt](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F1011)是基于JavaScript的[高级解决方案](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2
C++ 解析Json——jsoncpp(转)
 原文:https://www.cnblogs.com/liaocheng/p/4243731.html  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和xml类似,本文主要对VS2008中使用Jsoncpp解析json的方法做一下记录。 Jsoncpp是个跨平台的开源库,下载地址:[http://so
Chrome 80 中 Iframe 跨域 Cookie 的 Samesite 问题
新项目要嵌入之前的一个项目,而且该被嵌入项目之前提供给第三方使用,他们也是用的iframe。以前都是好的,但是现在发现要是iframe的地址和父级的地址不同源,项目登录时无法设置cookie。 一开始以为后端出问题了,后来换火狐、ie edge 都是可以的,并且其他人的Chrome也有可以用的。 并且接口设置cookie时提示:“this set-coo
IE iframe cookie问题(p3p)
前段时间碰到一个问题,就是在IE下,使用iFrame嵌入页面时,该页面的会话级别的cookie无法写入,导致服务端始终无法获取JSESSIONID,每次都是产生一个新的,使得Session无法使用。 **只需要设置 P3P HTTP Header,在隐含 iframe 里面跨域设置 cookie 就可以成功。** ASP直接在头部加了头部申明,测试有效。
JavaScript图表工具FusionCharts创建帕累托图教程
**[FusionCharts Suite XT](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3447)**是全面的跨平台、跨浏览器JavaScript图表套包,其中包括[FusionCharts XT](https://www.os
JavaScript图表工具FusionCharts如何使用可拖动图表
**[FusionCharts Suite XT](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3447)**是全面的跨平台、跨浏览器JavaScript图表套包,其中包括[FusionCharts XT](https://www.os
JavaScript图表工具创建甘特图入门教程
**[FusionCharts Suite XT](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3447)**是全面的跨平台、跨浏览器JavaScript图表套包,其中包括[FusionCharts XT](https://www.os
JavaScript图表工具缩放折线图教程
**[FusionCharts Suite XT](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.evget.com%2Fproduct%2F3447)**是全面的跨平台、跨浏览器JavaScript图表套包,其中包括[FusionCharts XT](https://www.os
ReactNative项目升级避坑指南
众所周知,ReactNative的项目升级是一个老大难问题,相信经历过版本升级的老铁们,心中的酸(ku)甜(bi)苦(ha)辣(ha)的感觉记忆犹新。 因为ReactNative项目升级设计到Android项目,IOS项目以及Javascript项目三方面的修改,处理起来还是很麻烦的,经常是解决一个报错又出来一个新的报错,红色的报错框仿佛在一直提示升级的困难
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"