Vue 使用iframe引用html页面实现vue和html页面方法的调用操作


Posted in Javascript onNovember 16, 2020

当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互

首先我们可以再vue页面中使用标签引用html页面

<template>
 <div>
  <iframe
   name="iframeMap"
   id="iframeMapViewComponent"
   width="100%"
   height="470px"
   v-bind:src="smgHtmlPath"
   frameborder="0"
   scrolling="no"
   ref="iframeDom"
  ></iframe>
 </div>
</template>

其中src就是我们html的地址,我们可以在data中定义smgHtmlPath属性,在我们的created方法中初始化,为该属性赋予初始值

如果页面加载出来了,我们就可以开始vue页面和html页面的交互了

如果我们需要vue页面调用html页面方法,我们可以使用如下代码

mounted() {
  this.iframeWin = this.$refs.iframeDom.contentWindow;
 },

首先在我们的mounted方法中得到iframe对象

在vue页面使用postMessage的API向html页面发送请求数据,因为我们的vue和html页面可能不在同一域名,所以会产生跨域的问题,这里我们使用的postMessage可以实现跨域,我这里在google和IE11测试都是可以跨域的

loadSmgxmlModels(data) {
    this.iframeWin.postMessage(data,"*")
}

这里的data就是我们要传递给html页面的数据

“*”,这里代表的是所有地址可以接收到,我们也可以指定地址,例如:www.baidu.com

在html页面的标签中编写监听方法,用来监听我们的请求,获取数据

window.addEventListener('message', function(ev) {
  // 当我们是父子窗口进行消息传递时,可以使用此判断,只接受父窗口传递来的消息,
  if (ev.source !== window.parent) return;
  var data = ev.data;
 console.log("vue传递的数据为:"+data);
  //下面可以调用我们html页面js中的方法,使用传递的数据进行操作了
}, false);

这里我们监听的就是message,可以获取数据。

补充知识:Vue界面使用iframe嵌套html界面的传值问题

一.从父页面给子页面传值

可以通过url进行传值,若嵌入外网例如www.baidu.com,可以设置为

<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>

asd后面跟的值可以根据需要更改,不影响地址的访问

若为本地html文件,类似的可以写作

:src="test.html#asd =1"

但是如何在子页面读取asd的值这个还没探究成功,稍后若寻找到合适的方法会再更新。这种方法比较适合比较简单的需求

二.父页面获取子页面的值

例如我们在子页面设置四个click事件,JS代码如下

<script>
    var n = 0;
    function FN()
    {
      n = 1;
      alert('hello1'+n);
    }
    function EN()
    {
      n = 2;
      alert('hello1'+n);
    }
    function ER()
    {
      n = 3;
      alert('hello1'+n);
    }
    function GN()
    {
      n = 4;
      alert('hello1'+n);
    }
</script>

那么在父页面我们可以在method中定义如下函数获取到n的值

callchild(){
   let obj1=window.frames["child"];//获得对应iframe的window对象
   alert(obj1.n);
  },

将callchild函数由某个button触发,可以看到弹出窗口

Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

以上这篇Vue 使用iframe引用html页面实现vue和html页面方法的调用操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
Oct 26 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
小程序自定义弹框效果
Nov 16 #Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 #Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 #Javascript
小程序实现上下切换位置
Nov 16 #Javascript
You might like
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python中列表(list)操作方法汇总
2014/08/18 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python程序需要编译吗
2020/06/19 Python
ORACLE十问
2015/04/20 面试题
JAVA软件工程师测试题
2014/07/25 面试题
三年级学生评语
2014/04/23 职场文书
宿舍管理制度范本
2015/08/07 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
python如何利用traceback获取详细的异常信息
2021/06/05 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Redis keys命令的具体使用
2022/06/05 Redis
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android