vue项目嵌套iframe实现发送、接收数据
目录
- vue嵌套iframe发送、接收数据
- vue中iframe的使用
- 获取iframe里面的内容
- CDM跨域
vue嵌套iframe发送、接收数据
<template> <div class="home"> <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe> </div> </template>
<script>
export default {
mounted() {
let mapFrame = this.$refs['mapFrame']
if (mapFrame.attachEvent){ //兼容浏览器判断
mapFrame.attachEvent("onload", function(){
let iframeWin = mapFrame.contentWindow
iframeWin.postMessage({
method: 'getBaseInfo',
data:'我是vuex state的数据'
},'*')
})
} else {
mapFrame.onload = function(){
let iframeWin = mapFrame.contentWindow
iframeWin.postMessage({
method: 'getBaseInfo',
data:'我是vuex state的数据'
},'*')
}
}
}
}
</script>
<style scoped lang="stylus">
.home {
.mapFrame {
height: 300px;
width: 500px;
}
}
</style>
子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>iframe嵌套网页测试</title>
</head>
<body>
<script>
window.addEventListener('message',function(e){
console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
console.log(e.origin,e.data)
})
// window.postMessage({
// method:'localtest',
// data:'ddddddddddddddddddddddddddddd'
// },'*')
</script>
</body>
</html>
vue中iframe的使用
iframe在同域时能自由操作iframe和父框架的内容(DOM)，在跨域时可以实现页面跳转。
<iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder="0"></iframe>
获取iframe里面的内容
iframe.contentWindow, 获取iframe的window对象iframe.contentDocument, 获取iframe的document对象
const _iframe = document.getElementById('iframe').contentWindow
CDM跨域
如果你设置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)进行跨域消息的传递。
发送消息: 使用postmessage方法
postMessage(message, targetOrigin)
message: 传递给iframe的内容, 通常是string,最好不要传object对象，需要传对象时，使用JSON.stringfy转换。targetOrigin: 接受你传递消息的域名，可以设置绝对路径，也可以设置""或者"/"。 表示任意域名都行，"/"表示只能传递给同域域名。
_iframe.postMessage(JSON.stringify(_obj), '*')
接受消息: 监听message事件
当targetOrigin接受到message消息之后,会触发message事件。 message提供的event对象上有3个重要的属性，data,origin,source.
window.addEventListener('message', function (event) {
console.log(event)
if (event.origin === window.callBackUrl.iframeSrc) {
_this.childData = event.data
console.log(event.data)
_this.saveForm()
}
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
在vue中实现嵌套页面(iframe)
vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute
-
vue组件中使用iframe元素的示例代码
本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g
-
vue使用facebook twitter分享示例
记录一次vue使用分享 固定内容的分享 参考文档 facebook 分享文档 twitter 分享文档 vue 使用 facebook 使用分享 找到index.html 添加一下代码 <!-- facebook 分享 --> <div id="fb-root"></div> <script>(function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.g
-
vue项目嵌套iframe实现发送、接收数据
目录 vue嵌套iframe发送.接收数据 vue中iframe的使用 获取iframe里面的内容 CDM跨域 vue嵌套iframe发送.接收数据 <template> <div class="home"> <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame">&
-
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. jsencrypt.js的github地址: https://github.com/travist/js... 使用yarn安装至Vue项目 yarn add jsencrypt --dep 或者使用npm npm install jsencrypt --dep 引入jsencrypt import { JSEncrypt } from 'jsencrypt' 可封装为全局混合,便于调用
-
Java NIO实例UDP发送接收数据代码分享
Java的NIO包中,有一个专门用于发送UDP数据包的类:DatagramChannel,UDP是一种无连接的网络协议, 一般用于发送一些准确度要求不太高的数据等. 完整的服务端程序如下: public class StatisticsServer { //每次发送接收的数据包大小 private final int MAX_BUFF_SIZE = 1024 * 10; //服务端监听端口,客户端也通过该端口发送数据 private int port; private DatagramChann
-
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
本文实例讲述了Python 网络编程之UDP发送接收数据功能.分享给大家供大家参考,具体如下: demo.py(UDP发送数据): import socket # 导入socket模块 def main(): # 创建一个udp套接字 udp_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # 绑定本机ip和端口号 (发送数据时,如果不绑定,系统会随机分配端口号.接收数据时,一般需要手动绑定ip和端口) udp_socket.b
-
Java网络编程UDP协议发送接收数据
本文实例为大家分享了Java网络编程UDP协议发送接收数据的具体代码,供大家参考,具体内容如下 UDP协议发送数据步骤 A:创建发送端socket对象: B:创建数据,并把数据打包: C:调用socket对象的发送方法发送数据包: D:释放资源 package net; import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAd
-
C#实现套接字发送接收数据
本文实例为大家分享了C#实现套接字发送接收数据的具体代码,供大家参考,具体内容如下 服务端 namespace TestServer { public partial class ServerForm : Form { Socket socketSend; // 将远程连接的客户端的IP地址和socket存入集合 Dictionary<string, Socket> dicSocket = new Dictionary<string, Socket>(); public Serve
-
C#请求http向网页发送接收数据的方法
本文实例为大家分享了C#请求http向网页发送数据.网页接收,供大家参考,具体内容如下 首先,我们需要的是什么东西? 用POST方式请求http,给网页传输数据,网页接收到数据之后,把数据存储到数据库中. 1.首先请求http,建立连接,把转码过的数据传输过去 2.网页接收数据,在转码之后存储到数据库 3.网页返回一个东西给传输方,表示我们已经接收到数据了 同样,我们请求http也是用的控制台模拟的 static void Main(string[] args) { string result
-
在vue项目中使用axios发送post请求出现400错误的解决
目录 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 总结了错误的几个原因 vue axios400 Bad Request问题 使用axios发送post请求出现400错误 出现400状态码主要有两种原因 1.bad request:“错误的请求" 2.invalid hostname:"不存在的域名” 我报的错是第一种bad request 总结了错误的几个原因 1.请求头错误,前端请求头的content-type和后端不一致 axios默认的请求头的
-
vue项目中做编辑功能传递数据时遇到问题的解决方法
在项目中完成编辑功能时,遇到了这样一个问题:编辑的功能使用的是一个子组件作为弹出框,如图 这里涉及到从父组件向子组件传递数据的问题,这个项目使用的是v1.0,问题是当点击了编辑以后,弹出的子组件中没有获取到父组件传过来的数据,检查后没有发现代码错误,最后解决的方法就是在父组件中,把传递的数据中的每一项都初始化了一遍就好了 creatIssue (type,list,id){ this.modelIssue=true; this.modeltype=type; if(type=='creat'){
-
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知axios默认是不让ajax请求头部携带cookie的,因此,在main.js中设置如下: import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios