Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
作者:梦 隐
当我们需要在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页面方法的调用操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。