Vue和iframe跨域调用
2024-05-11 05:44:41
Test.js 在iframe内的html页面引入
// 在iframe子页面引入该js
window.addEventListener ('message', function(event) {/*** 可以在这个地方调用HTML*/console.log('调用HTML')if (event&&event.data){console.log(event.data)console.log('开始执行调用HTML')//ifream加载完成时调用vue中的load方法，将父组件的所有方法告诉ifream中的页面event.data.parentFunctions&&event.data.parentFunctions.forEach(key=>{this.__proto__[key]=function (params) {//调用父类window.parent.postMessage ({functionName:key,params:params}, '*');}})//vue页面传入数据如果是调用html方法 则使用此方法event.data.functionName&&this[event.data.functionName](event.data.params)}
});child2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="Test.js"></script><script>function lodaTable(data) {this.skipHtml({name:'test01',functionName:'changge',params:{personName:'张三'}})console.log('name---->'+data)}</script>
</head>
<body>
<button onclick="lodaTable()">打开下一页</button>
<h1>首页</h1>
</body>
</html>
404.html 页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>404</h1>
</body>
</html>
Home.vue
<template><div class="iframestyleset"><button @click="invokeHtmlMethod({name:'test01',url:'static/test01.html'})">调用html方法</button><a href="https://www.baidu.com/">打开百度</a><button @click="goBack()">回退</button><iframe style="background-color: #42b983" v-for="(item,index) in cachePath " name="iframeMap" :id="item.name":src="item.url" width="100%" height="200px" @load="load(item)" frameborder="0" scrolling="no"ref="iframeDom"></iframe></div>
</template>
<script>
export default {data() {return {getPageUrl: 'static/child2.html',currentPages: [{name: 'test01',url: 'static/test01.html'}, {name: 'test02',url: 'static/test02.html'}, {name: 'test03',url: 'static/test03.html'}],cachePath: [{name: 'child2',url: 'static/child2.html'}]}},created() {// 绑定监听，主要是为了接收html页面发来的消息window.addEventListener('message', event => {console.log('html子页面传来的数据')console.log(event)//执行子页面想要调用的方法if (event && event.data) {event.data.functionName && this[event.data.functionName](event.data.params)}})},mounted() {let jz = this.cachePath.findIndex(item => item.name == 'child3')console.log('jz===>' + jz)},methods: {skip(page={name:undefined,functionName:undefined,params:undefined,type:undefined}) {if (page.type === 'html' || page.type == '1') {this.skipHtml(page)} else if (page.type === 'vue' || page.type == '2') {this.skipVue(page)} else {throw Error('page type no null (缺少type参数 vue | html | 1 | 2)')}},/*** vue 跳转* {name:vue名称,params:要传入的数据}*/skipVue(page={name:undefined,params:undefined}) {// {name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}}console.log('跳转Vue：' + page)this.$router.push(page)},/*** html 跳转* {name:html名称,functionName:要调用的函数名称,params:要调用的函数要传入的数据}*/skipHtml(page={name:undefined,functionName:undefined,params:undefined}) {console.log('跳转html：' + JSON.stringify(page))alert('跳转html：' + JSON.stringify(page))//1.首先判断这个地址是否存在let currentPage = this.currentPages.find(item => item.name == page.name)if (currentPage) {//2.判断是否已经加载过let jz = this.cachePath.findIndex(item => item.name == page.name)Object.assign(page, currentPage)//合并对象alert('page--->' + JSON.stringify(page))if (jz > -1) {//已经记载 则置顶alert('已经记载 则置顶'+jz)if (!(jz>=this.cachePath.length-1)){alert(5555555)this.cachePath.push(this.cachePath.splice(jz, 1)[0])}this.load(page)} else {alert('没有加载过 则添加')//没有加载过 则添加this.cachePath.push(page)}} else {if (this.cachePath[this.cachePath.length-1].name!='404'){this.cachePath.push({name: '404',url: 'static/404.html'})}}},invokeHtmlMethod(page) {let frame = document.getElementById(page.name)frame.contentWindow.postMessage(page, '*');},load(page) {this.$nextTick(() => {//1.获取到iframe对象let frame = document.getElementById(page.name)//2.给对象的contentWindow添加监听事件 parentFunctions（当前vue页面中的方法不要以$和_开头）let parentFunctions = Object.keys(this).filter(key => {if (!key.startsWith('$') && !key.startsWith('_') && typeof this[key] === 'function') {return key}})//3.告诉html页面 上个页面 要对他进行的操作 {parentFunctions:当前vue页面中的方法集合（必传）,// functionName:要调用的html中的方法（可空）,// params:要调用的html中的方法所传的参数（可空）// }//在将要进入的页面 可以直接使用this.方法名(参数)使用当前vue页面中的所有方法frame.contentWindow.postMessage(Object.assign({parentFunctions: parentFunctions},page), '*');})},goBack() {if (this.cachePath.length>1){this.cachePath.pop()}}}
}
</script>Vue目录结构
Vue和iframe跨域调用相关推荐
- iframe跨域调用问题
iframe框架之间的函数调用 知识点: iframe同域window对象的函数调用,iframe跨域window对象的函数调用. 获取页面中iframe中的window对象 介于兼容性的问题,推荐使 ...
- iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
- 用CORS 解决vue.js django跨域调用
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的 ...
- 通过iframe中间页实现js跨域调用
什么是跨域调用? 当两个页面端口不同或者协议不同,或者ip地址不同的时候,如果想在这个页面调用另外一个页面中的方法,就叫做跨域调用 父页面调用子页面 通过iframe实现跨域请求 www.a.com ...
- vue 调用webservice_js跨域调用WebService的简单实例
步骤1. 在web.config中的system.web节点里加入 步骤2.webservice代码 using System; using System.Collections.Generic; u ...
- vue 引入pdf跨域问题怎么解决_VUE项目中的跨域问题
[摘要]跨域问题是前端开发人员比较常见的问题, 那么跨域出现的原因, 该如何解决跨域, VUE中对跨域又是怎样处理的呢 [作者]田鋆鹏 一. 前端为什么会出现跨域问题? 跨域问题是浏览器同源策略限制, ...
- iframe跨域通信的通用解决方案-第二弹!（终极解决方案）
一年前,我发过一篇关于跨文档通信方案的文章<iframe跨域通信的通用解决方案>,提供了一种基于创建iframe与轮询window.name的方案. 一年后,很高兴地带来彻底改造的新版本. ...
- 怎样获取不同域名的ifram的html,AJAX | iframe跨域的实现方法
iframe跨域 HTML5学堂:本文当中我们介绍了跨域的基本知识,讲解到了跨域的相关种类,并讲解了解决跨域中的一种方法--如何使用iframe跨域.讲解了iframe跨域的基本原理与流程,并配以实战 ...
- 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码和在线测试地址】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScrip ...
最新文章
- 差点败北！B站疯传3W次，堪称最强Java面试题，顺利拿下阿里P7的35K*16 薪 Offer...
- mongodb 内存限制
- iptables的配置实例
- fir.im Weekly - 2017 年必须了解的 iOS 开源库
- 使用git命令行将某个指定文件回退到前几个版本
- 我的Linux折腾史
- 支持vxlan的服务器网卡,3台服务器互通vxlan
- 在Vim中将DOS行尾转换为Linux行尾
- Ubunbtu18.04报错:No rule to make target ‘kernel/include/linux/netfilter/xt_CONNMARK.h‘
- Android Handler机制之总目录
- LeetCode Count of Smaller Numbers After Self
- 【火灾检测】基于matlab GUI火灾检测【含Matlab源码 249期】
- python语言的多行注释以什么开头和结尾_python多行注释
- 【渝粤题库】陕西师范大学163208 饭店管理 作业
- 单片机课设中期报告_基于单片机的火灾自动报警系统 中期报告
- 理解Window和WindowManager
- CLH lock queue的原理解释及Java实现
- python量化投资实训班_Python量化投资实训营
- 教师运用计算机上课的随笔,初中信息技术教师的教学随笔5
- android和MTKP60区别,联发科P60和高通骁龙660哪个好?骁龙660与联发科P60区别对比详细评测...