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 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
JavaScript oncopy事件用法实例解析
May 13 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Python迭代用法实例教程
2014/09/08 Python
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
高中毕业生个人自我鉴定
2013/11/24 职场文书
置业顾问岗位职责
2014/03/02 职场文书
给小学生的新年寄语
2014/04/04 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
2019个人工作总结
2019/06/21 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python