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的Select选择框的华丽变身
Aug 23 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
jsPDF导出pdf示例
May 02 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
js贪吃蛇游戏实现思路和源码
Apr 14 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
JavaScript中import用法总结
Jan 20 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
2017/07/04 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
python复制文件到指定目录的实例
2018/04/27 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
运动会广播稿400字
2014/01/25 职场文书
《月迹》教学反思
2014/02/19 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
乡镇八一建军节活动方案
2014/08/24 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Win2008系统搭建DHCP服务器
2022/06/25 Servers