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 获取服务器控件值的代码
Mar 05 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
小程序转发探索示例
Feb 19 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
javascript实现移动端轮播图
Dec 09 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
模仿OSO的论坛(二)
2006/10/09 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
多个应用共存的Django配置方法
2018/05/30 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Python实现井字棋小游戏
2020/03/09 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
美国糖果店:Sugarfina
2019/02/21 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
应届生体育教师自荐信
2013/10/03 职场文书
程序员岗位职责
2013/11/11 职场文书
绩效管理实施方案
2014/03/19 职场文书
查摆问题自我剖析材料
2014/08/18 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
白酒代理协议书范本
2014/10/26 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python