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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
优化javascript的执行速度
Jan 23 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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
新52大事件
2020/03/03 欧美动漫
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jquery使用经验小结
2015/05/20 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python Queue模块详解
2014/11/30 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
测试驱动开发的主要步骤是什么
2014/12/10 面试题
应届大学生自荐信格式
2013/09/21 职场文书
技校生自我鉴定范文
2013/09/26 职场文书
金融专业应届生求职信
2013/11/02 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
解除劳动合同协议书
2014/04/14 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
2014年科研工作总结
2014/12/03 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript