iframe内嵌页面——跨域通讯
<template>
<div class="act-form">
<iframe
:src="src"
ref="iframe"
frameborder="no"
align="middle"
width="100%"
height="600px"
scrolling="auto" />
<el-button @click="sendMessage">向iframe发送信息</el-button>
</div>
</template>
<script>
export default {
data () {
return {
src: '',
iframeWin: null,
isLoaded: false
}
},
created () {
this.src = 'http://odp.oa.com' //获取iframe
var oIframe=document.getElementsByTagName('iframe')[0]; //获取iframe中的元素
var oText=oIframe.contentWindow.document.getElementById('navContent'); //改变iframe中元素的属性
oIframe.contentWindow.document.getElementById('navContent').style.color='red'; },
mounted () {
// 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage
window.addEventListener('message', this.handleMessage)
this.iframeWin = this.$refs.iframe.contentWindow
},
methods: {
sendMessage () {
console.log(this.iframeWin, 1111111)
this.iframeWin.postMessage({
cmd: 'getFormJson',
params: {}
}, '*')
},
async handleMessage (event) {
// console.log(event, 222222)
const data = event.data
// console.log(data, 333333)
switch (data.cmd) {
case 'returnFormJson':
break
case 'returnHeight':
break
}
},
async enroll (data) {
console.log('4444444')
}
}
}
</script>
<!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>
<iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe"></iframe>
<iframe v-else :src="urlPath" class="iframe" ref="iframe"></iframe>
</template> <script>
import { mapState, mapGetters } from 'vuex'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
export default {
name: 'nxframe',
data() {
return {
urlPath: this.getUrlPath() // iframe src 路径
}
},
created() {
NProgress.configure({ showSpinner: false })
},
mounted() {
this.load()
this.resize()
},
props: ['routerPath'],
watch: {
$route: function() {
this.load()
},
routerPath: function(val) {
// 监听routerPath变化，改变src路径
this.urlPath = this.getUrlPath()
}
},
components: {
...mapGetters(['tagList']),
tagListNum: function() {
return this.tagList.length !== 0
},
...mapState({
name: state => state.user.name
})
},
methods: {
// 显示等待框
show() {
NProgress.start()
},
// 隐藏等待狂
hide() {
NProgress.done()
},
// 加载浏览器窗口变化自适应
resize() {
window.onresize = () => {
this.iframeInit()
}
},
// 加载组件
load() {
this.show()
var flag = true // URL是否包含问号
if (this.$route.query.src.indexOf('?') === -1) {
flag = false
}
var list = []
for (var key in this.$route.query) {
if (key !== 'src' && key !== 'name') {
list.push(`${key}= this.$route.query[key]`)
}
}
list = list.join('&').toString()
if (flag) {
this.$route.query.src = `${this.$route.query.src}${
list.length > 0 ? `&list` : ''
}`
} else {
this.$route.query.src = `${this.$route.query.src}${
list.length > 0 ? `?list` : ''
}`
}
// 超时3s自动隐藏等待狂，加强用户体验
let time = 3
const timeFunc = setInterval(() => {
time--
if (time === 0) {
this.hide()
clearInterval(timeFunc)
}
}, 1000)
this.iframeInit()
},
// iframe窗口初始化
iframeInit() {
const iframe = this.$refs.iframe
const clientHeight = document.documentElement.clientHeight - 200
iframe.style.height = `${clientHeight}px`
if (iframe.attachEvent) {
iframe.attachEvent('onload', () => {
this.hide()
})
} else {
iframe.onload = () => {
this.hide()
}
}
},
getUrlPath: function() {
// 获取 iframe src 路径
let url = window.location.href
url = url.replace('/myiframe', '')
return url
}
}
}
</script> <style lang="scss">
.iframe {
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
box-sizing: border-box;
}
</style>
iframe内嵌页面——跨域通讯的更多相关文章
- iframe中子父页面跨域通讯
目录 #跨域发送信息 #跨域接收信息 #示例Demo 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发 ...
- 如何根据iframe内嵌页面调整iframe高宽续篇
接着昨天的工作 如何根据iframe内嵌页面调整iframe高宽 来说,按照文章中说的第二种方法实现代码如下: 实现 A.com/detail/view 页面的iframe代码如下: <ifra ...
- Python3.x：selenium获取iframe内嵌页面的源码
Python3.x:selenium获取iframe内嵌页面的源码 前言 在一些网页中经常会看到ifrmae/frame标签,iframe是嵌入式框架一般用来在已有的页面中嵌入另一个页面,当一个元素在 ...
- 如何根据iframe内嵌页面调整iframe高宽
问题来自于工作的实例,我的一个域名A的页面,有个iframe,它可能内嵌了另一个域名B的页面,也可能内嵌域名C的页面,但是呢,B和C的页面大小是不一样的,特别是高是不一样的高,那么我如何设置ifram ...
- 计算机网络之iframe内联框架跨域
iframe框架同源下的数据调用 iframe框架非同源下的数据传输 一.iframe框架同源下的数据调用 1.父窗口向子窗口获取数据 //html1父级窗口 <iframe src=" ...
- 弹出iframe内嵌页面元素到父页面并全屏化
(注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...
- MetaBase使用iframe内嵌到Vue页面样式优化
Matebase是一个开源,易上手的BI工具,这里不做太多介绍了. 官网地址:https://www.metabase.com/ 解决问题描述: 使用iframe内嵌Metabase公开链接之后,页面 ...
- iframe跨域通讯
工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...
- [转]内嵌页面iframe以及和其兄弟iframe的相互传值
原文出处 iframe的调用包括以下几个方面:(调用包含html dom,js全局变量,js方法) 主页面调用iframe: iframe页面调用主页面: 主页面的包含的iframe之间相互调用: 主 ...
随机推荐
- 算法习题---4.4信息解码（UVa213）
一:题目 消息编码方案要求在两个部分中发送一个被编码的消息.第一部分:称为头,包含消息的字符.第二部分包含一个模式 表示信息.你必须写一个程序,可以解码这个消息. (一)题目详细 你的程序的编码方案的 ...
- Egret入门学习日记 --- 第十五篇（书中 6.1~6.9节 内容）
第十五篇(书中 6.1~6.9节 内容) 好的,昨天完成了第五章. 今天来看第六章. 总结重点: 1.如何对组件进行分组? 跟着做: 重点1:如何对组件进行分组? 首先,选中你想要组合的组件. 然后点 ...
- 解决jdk卸载出错2502、2503
之前装的jdk1.6,后来软件要求用1.8,就卸载了1.6,卸载的时候出现了这个问题.后来又有其他软件用1.8出错,就又要装1.6,脑壳疼.网上建议先卸载1.8再装低版本,结果卸载1.8,又出现错误2 ...
- Redis set集合的使用
集合中的元素个数最多为2的32次方-1个,集合中的元素师没有顺序的. Redis集合的操作命令和对应的api如下: smembers [set]JedisAPI:public Set<Strin ...
- Go之gob包的使用
gob包("encoding/gob")管理gob流——在encoder(编码器,也就是发送器)和decoder(解码器,也就是接受器)之间交换的字节流数据(gob 就是 go b ...
- springboot没有webapp目录——手动添加
src\main\webapp\ 参考文章:https://blog.csdn.net/fakerswe/article/details/80922536
- 在Ubuntu中安装了MongoDB后无法启动mongod的问题
今天准备学习MongoDB,没想到下载之后服务器端启动不了,记录一下问题和处理过程 一.安装 在Ubuntu中安装还是很简单,直接:sudo apt install mongodb 二.启动 启动Mo ...
- C++程序设计学习-第2章
第二章 变量与基本类型 1.基本内置类型 C++定义了一套包括算术类型和空类型在内的基本数据类型 算术类型:整型和浮点型,包括带符号类型(signed)和无符号类型(unsigned),带符号类型可以 ...
- LC 206. Reverse Linked List
题目描述 Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5-> ...
- TCP三次握手和四次挥手及wireshark抓取
TCP的三次握手与四次挥手的详细介绍: 三次握手: 第一次握手(SYN=1, seq=x): 客户端发送客户端发送一个 TCP 的 SYN 标志位置1的,指明客户端打算连接的服务器的端口,以及初始序号 ...