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 相关文章推荐
身份证号码前六位所代表的省,市,区, 以及地区编码下载
Apr 12 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
layui文件上传实现代码
May 20 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
PHP闭包实例解析
2014/09/08 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
个人存款证明书
2014/10/18 职场文书
清洁工工作总结
2015/08/11 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Win10系统下配置Java环境变量
2021/06/13 Java/Android
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL