浏览器跨域消息传递
发表于|更新于|javascript
|浏览量:
父页面给子页面传值
1 | const iframe = document.getElementId('iframe')//iframe容器 |
子页面接收消息
1 | window.onmessage = function(event){ |
子页面给父页面传递消息
1 | window.parent.postMessage({msg: '来自子页面值'}, "*"); |
父页面接收消息
1 | window.onmessage = function(event){ |
文章作者: 徐义杰
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 小徐的博客!
相关推荐
2024-10-31
pinia的安装和使用
1.什么是 pinia?pinia是一个类似于vuex的状态管理工具 2.inia和vuex的区别 pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子 与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API; 最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持; 3.安装和使用1.安装 123yarn add pinia# 或者使用 npmnpm install pinia 2.使用 在根目录新建store文件,store中新建index.js文件1234567891011121314151617181920// stores/counter.jsimport { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', { state: () => { ...
2024-10-31
mobx的介绍和使用
什么是mobox是一个用来管理状态的库,如果被观测组件发生改变,会自动渲染有关页面,告别setState;mbox编程的3个重点: 1.observer观测器:带有观测器的react组件或者属性被mobx实时观测 2.observable可观测对象:由mobx建立的可观测对象 3.action更新事件:标识观测对象的改变事件 mobox的安装和使用1.安装 12npm install mobx,mobx-react-lite --save根目录新建store文件并在store中新建index.js和test.Store.js 123456789101112131415161718192021222324252627282930313233343536373839// test.Store.js module import { makeAutoObservable } from 'mobx' class TestStore { userInfo = {} ...
2024-11-01
如何在npm中发布自己开发的插件
注册npm账号,打开 https://www.npmjs.com/signup 进行注册初始化需要上传的包,新建一个文件夹,运行1npm init 根据提示会在文件夹中生成一个package.json文件,内容如下: 123456789101112{ "name": "xyj-3d", #包名 "version": "1.0.3",#版本号 "description": "cesium-plus",#信息 "main": "xyj.min.js",#入口文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author":...
2024-11-01
vue打包后出现文件过大加载速度过慢问题解决方案
我们在处理网站加载速度过慢问题是,首先想到的是cdn加速,还有一种解决方案,这种方案作用于nginx服务。 下面是我做网站配置的解决方案: 新建一个vue项目,打包之后发现会有一个文件特别大,特别是引入的插件越多,这个文件就越大,查阅资料发现这是我们的node_modules打包之后生成的文件。webpack配置可以将文件打包为.gz文件,传入nginx服务器之后,开启相关配置,他就会自动解压,这是这个文件就会成倍的减小。webpack的配置如下: 123456789101112131415//js html css配置configureWebpack: (config) => { /* gzip压缩 */ const productionGzipExtensions = ['html', 'js', 'css'] config.plugins.push( new CompressionWebpackPlugin({ filename:...
2024-11-01
记一次rollup打包过程
安装roolup1yarn add -D rollup 安装其他插件1yarn add -D @rollup/plugin-commonjs rollup-plugin-terser rollup-plugin-typescript2 插件说明: 123@rollup/plugin-commonjs:让rollup知道项目用了那些依赖,打包的时候不要忘了rollup-plugin-terser:压缩代码rollup-plugin-typescript2:让rollup可以看懂TS代码 rollup配置文件新建rollup.config.js配置文件 12345678910111213141516171819202122232425// 导入依赖 const { terser } = require('rollup-plugin-terser') const commonjs = require('@rollup/plugin-commonjs') const typescript =...
2024-11-09
nginx配置https访问
https证书怎么获取,教程很多,就不在这里说了,主要记录一下如何开启nginx的https服务,以及配置http转发https. 第一步,打开nginx配置文件nginx.conf.打开https服务1234567891011121314151617#server {# listen 443 ssl;# server_name localhost;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / {# root html;# index index.html index.htm;# ...
评论
公告
这是我的技术小站,用 Hexo 搭建。这里是 IT 知识的富集地,有编程语言、算法、系统、网络和安全等方面的内容,是 IT 爱好者和专业人士的好去处。