1、Vue组件中如何引入iframe？
2、vue如何获取iframe对象以及iframe内的window对象？
3、vue如何向iframe内传送信息？
4、iframe内如何向外部vue发送信息？
一、Vue组件中如何引入iframe？
直接通过添加iframe标签，src属性绑定data中的src，第一步引入就完成了
<template>
<div class="act-form">
<iframe :src="src"></iframe>
</div>
</template>
<script>
export default {
data () {
return {
src: '你的src'
}
}
}
</script>
二、vue如何获取iframe对象以及iframe内的window对象？
获取iframe的window对象，因为只有拿到这个对象才能向iframe中传值
<template>
<div class="act-form">
<iframe :src="src" ref="iframe"></iframe>
</div>
</template>
<script>
export default {
data () {
return {
src: '你的src'
}
},
mounted () {
// 这里就拿到了iframe的对象
console.log(this.$refs.iframe)
// 这里就拿到了iframe的window对象
console.log(this.$refs.iframe.contentWindow)
}
}
</script>三、vue如何向iframe内传送信息？
通过postMessage，具体关于postMessage是什么，自己去google，
我的理解postMessage是有点类似于UDP协议，就像短信，是异步的，你发信息过去，但是没有返回值的，只能内部处理完成以后再通过postMessage向外部发送一个消息，外部监听message
为了让postMessage像TCP，为了体验像同步的和实现多通信互不干扰，特别制定的message结构如下
{
cmd: '命令',
params: {
'键1': '值1',
'键2': '值2'
}
}通过cmd来区别这条message的目的
具体代码如下
<template>
<div class="act-form">
<iframe :src="src" ref="iframe"></iframe>
<div @click="sendMessage">向iframe发送信息</div>
</div>
</template>
<script>
export default {
data () {
return {
src: '你的src',
iframeWin: {}
}
},
methods: {
sendMessage () {
// 外部vue向iframe内部传数据
this.iframeWin.postMessage({
cmd: 'getFormJson',
params: {}
}, '*')
},
},
mounted () {
// 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
this.iframeWin = this.$refs.iframe.contentWindow
},
handleMessage (event) {
// 根据上面制定的结构来解析iframe内部发回来的数据
const data = event.data
switch (data.cmd) {
case 'returnFormJson':
// 业务逻辑
break
case 'returnHeight':
// 业务逻辑
break
}
}
}
</script>四、iframe内如何向外部vue发送信息？
现在通过单击‘向iframe发送信息’这个按钮，从外部vue中已经向iframe中发送了一条信息
{
cmd: 'getFormJson',
params: {}
}那么iframe内部如何处理这个信息？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iframe Window</title>
<style>
body {
background-color: #D53C2F;
color: white;
}
</style>
</head>
<body>
<h1>Hello there, i'm an iframe</h1>
<script>
// 向父vue页面发送信息
window.parent.postMessage({
cmd: 'returnHeight',
params: {
success: true,
data: document.body.scrollHeight + 'px'
}
}, '*');
// 接受父页面发来的信息
window.addEventListener("message", function(event){
var data = event.data;
switch (data.cmd) {
case 'getFormJson':
// 处理业务逻辑
break;
}
});
</script>
</body>
</html>至此为止，内部的收发信息和外部的收发信息都已解决！
下面是完整代码：
<template>
<div class="act-form">
<div class="nav">
<img src="https://cxkccdn.oss-cn-shanghai.aliyuncs.com/lesai_img/icon_back_white.png" @click="back()">
<div class="title">报名</div>
</div>
<div class="iframe-out">
<iframe :src="src" ref="iframe" @load="iframeLoad"></iframe>
</div>
<div v-if="isLoaded" class="send-form"><div class="send" @click="sendMessage()">提交</div></div>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="sass" rel="stylesheet/sass">
@import "style.scss";
</style>
<script>
import { Toast, Indicator } from 'mint-ui'
import api from '@/utils/api'
export default {
data () {
return {
src: '',
iframeWin: null,
isLoaded: false
}
},
created () {
let matchFamily = this.$store.state.matchFamily
this.src = process.env.BASE_URL + '/matches/' + matchFamily.match.id + '/act/' + matchFamily.act.id + '/joinweb?token=' + this.$store.state.token
},
mounted () {
window.addEventListener('message', this.handleMessage)
this.iframeWin = this.$refs.iframe.contentWindow
// 开启加载动画
Indicator.open({
text: '努力加载中...',
spinnerType: 'triple-bounce'
})
},
methods: {
back () {
this.$router.push('/actIntro')
},
sendMessage () {
this.iframeWin.postMessage({
cmd: 'getFormJson',
params: {}
}, '*')
},
iframeLoad () {
// 关闭加载动画
Indicator.close()
},
async handleMessage (event) {
const data = event.data
switch (data.cmd) {
case 'returnFormJson':
if (data.params.success) {
// 调用报名方法
await this.enroll(data.params.data)
} else {
console.log('returnFormJson失败')
console.log(data.params)
}
break
case 'returnHeight':
if (data.params.success) {
this.$refs.iframe.height = data.params.data
this.isLoaded = true
}
break
}
},
async enroll (data) {
let matchFamily = this.$store.state.matchFamily
let result = await api.enroll(matchFamily.match.id, matchFamily.act.id, data)
if (result.success) {
if (result.data.status === 'no_pay') {
// 更新缓存
let resultMatch = await api.match(matchFamily.match.id, {})
if (resultMatch.success) {
this.$store.commit('SET_CURRENT_MATCH', resultMatch.data)
}
Toast({
message: '报名成功',
position: 'bottom'
})
this.$router.push('/match/' + matchFamily.match.id + '/mdetail')
} else {
console.log('需要跳转到支付页面')
}
}
}
}
}
</script>
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案 无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
MIMO技术的优缺点优点通过下面三个增益来总体概括：阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下，MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中，可以获得复用增益，即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中，可以获得分集增益，即可靠性性能的改善。分集增益用独立衰落支路数来描述，即分集指数。在使用了空时编码的MIMO系统中，由于接收天线或发射天线之间的间距较远，可认为它们各自的大尺度衰落是相互独立的，因此分布式MIMO
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
功能需求：主机使用一个串口，与两个从机进行双向通信，主机向从机发送数据，从机能够返回数据，由于结构限制，主机与从机之间只有3根线（电源、地、数据线），并且从机上没有设物理的电源开关，需要通过与主机连接的数据线来控制开机，总结如下：1、数据线只有1根2、能够双向通信3、主机能够控制从机开机4、主机可以单独向1个从机发数据，也可以同时向两个从机发送数据根据需求，设计出如下电路：工作原理分析：VCC_24V_IN、GND、LINE_L（LINE_R）三根线接线连接到从机，电源开启电路是从机内部的电源控制。开机的逻辑：*主机先上电，LINE_L因为主机的R1上拉而有高电平，使Q6导通，Q5的G极电压被
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一：vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二：安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三：
我有一个RaspberryPiTFT7"触摸屏显示器，我想创建一个简单的应用程序来显示和输出系统数据(即CPU使用率、温度等)。我注意到目前常见的实现方法是使用pygame库输出到显示器连接到的帧缓冲区/dev/fb1。我想执行相同的操作，但使用Ruby，因为我更熟悉这门语言。有人可以为我指明正确的方向，让我知道如何开始吗？我查看了rubygame和gosu库，它们似乎能够做我想做的事情，即绘制屏幕，但我找不到任何关于如何将输出定向到的信息帧缓冲区本身。 最佳答案 rubycorelib有一个IO您应该能够使用该类将输出定向
目录一、原理部分1、什么是串行通信（1）并行通信与串行通信（2）串行通信的制式（3）串行通信的主要方式 2、配置串口（1）SCON和PCON：串行口1的控制寄存器（2）SBUF：串行口数据缓冲寄存器 （3）AUXR：辅助寄存器编辑（4）ES、PS：与串行口1中断相关的寄存器（5）波特率设置 3、串口框架编写二、程序案例一、原理部分1、什么是串行通信（1）并行通信与串行通信微控制器与外部设备的数据通信，根据连线结构和传送方式的不同，可以分为两种：并行通信和串行通信。并行通信：数据的各位同时发送与接收，每个数据位使用一条导线，这种方式传输快，但是需要多条导线进行信号传输。串行通信：数据一位一