iframe嵌套vue,iframe替代方案
本文主要介绍一个封装了iframe的vue组件的开发，帮助大家更好的理解和学习使用vue框架。感兴趣的朋友可以了解一下。
一.部件介绍
二。组件的内部结构和逻辑
1.代码组织结构2。地图组件3。iframe接口
四。外部接口
动词（verb的缩写）经营成果六。摘要
VUE的基本单位，我想应该是组件。用VUE开发前端项目，就是一个一个开发组件，然后像搭积木一样把项目搭建起来。组件包含在页面或更大的组件中。在这里，组件和页面之间的界限似乎并不明显。事实上，对于单页应用程序，只有一个页面。
组件的优点，第一，可以加强重用；二是可以封装特定的功能，有利于调用；第三，由于职责明确，组件内聚度高，组件间耦合度低，有利于系统功能的优化、扩展和维护。好处很多。
组件开发，主要由两部分组成：
1.组件的内部逻辑
2.外部接口
由于我在过去两天制作的组件包含一个iframe，所以仍然有一些工作内容：
3.iframe接口
目录
这是一个地图插件。功能是显示地图，接受外部命令，加载图层，绘制图形等相关操作。该地图由arcgis for js实现。由于我们过去开发的项目，有一些地图操作的积累，但是没有前后分离，没有采用VUE或者REACT，还是传统的网页。因为时间紧，又想直接重用之前的成果，所以考虑用iframe加载地图页面，封装在VUE组件中，组件与外部命令接口，并在iframe中与地图页面交互。
一、组件介绍
二、组件内部结构及逻辑
1、代码组织结构
Map.vue
模板
div class=地图容器
！-拿着地图页-
iframe:src= src ref= iframe @ load= iframe load /iframe
/div
/模板
！-添加“scoped”属性以将CSS仅限制到此组件-
style scoped=“scoped”。映射-容器iframe{
宽度：100%；
身高：100%；
边框：无；
}
/风格
脚本
“导入自”中有路径信息././vue.config//。
设iframeWin=null//私有变量
导出默认值{
道具：[size]，//纯测试，没用，对应map ID= map ref= map size= 100 /map
data() {
返回{
Src: ，//映射页面地址
IsLoaded: false，//地图页面加载了吗？
IMap: null，//地图页面为外部访问而公开的对象。
Require:null//ArcGIS的require函数，用于引用自定义插件。我们以前写过很多自定义地图插件。
}
},
已创建(){
this . src=config . public path map . html
},
已安装(){
//侦听iframe消息
window . addevent listener( message ，this.handleMessage)
iframeWin=this。$refs.iframe.contentWindow
},
方法：{
iframeLoad() {
this.isLoaded=true
window.console.log(“地图准备就绪”)
},
异步消息(){//从iframe接收消息
this . require=iframewin . require；
this . IMAP=iframewin . IMAP；
},
负载层(节点、服务器){
this.iMap.layerHandler.load(节点、服务器)；
},
isReady(){
返回this.isLoaded
}
}
}
/脚本
关于组件的结构，例如
导出默认值{
props中的属性：//标记
Data() {//公共变量
},
加载时创建了(){//吗？
},
Mounted() {//当加载完成时
},
方法：{//公共方法
}
}
出口代表这是外部的。所以里面的属性、变量和方法都可以从外部访问。如果要私有，应该在导出之外定义。如本例所示：
这么简单的介绍在网上是找不到的。Vue的中文网站陈旧、碎片化，对初学者极其不友好，增加了学习成本。
2、地图组件
组件Map.vue如何与内部的iframe通信？
通过系统消息直接访问iframe的对象。直接访问iframe中的对象有一个前提，就是不能跨域。
iframe托管的map.html地图页面
！DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www .w3。org/TR/HTML 4/strict。 DTD
超文本标记语言
头
.
/头
身体
div id=map/div
.
/div
/body
/html
脚本src= http://192。168 .0 .200/pubzy 211/ArcGIS _ js _ API/3.19/init。js /脚本
脚本类型=文本/javascript
var iMap={ }；//外部引用接口
要求([
esri/config ，
esri/map ，
ESRI/几何/范围，
esri/SpatialReference ，
layerlib/LtLayer ，
dojo/dom ，
dojo/_base/array ，
道场/解析器，
dojo/domReady！
],函数（
esriConfig，
地图，
程度，
空间参考，
LtLayer，
多姆，
arrayUtils，
句法分析程序
) {
//地图
定义变量地图=.
/* 外部接口*/
iMap={
地图：地图，
传说：传说，
家：家，
tipDialog: tipDialog，
切换：切换，
概览地图：概览地图
};
iMap.drawHandler=.
iMap.layerHandler=.
iMap.centerAt=.
iMap.clear=.
IMAP。恢复检查=.
//向父某视频剪辑软件页面发送加载完毕信号
window.parent.postMessage({
cmd: mapIsReady ，
参数：{
成功：真的，
数据：真实
}
}, *);
/*结束外部接口*/
});
/脚本
地图组件Map.vue对应内联框架部分，详见一.2中的代码
导出默认值{。
已安装(){
//监听内联框架的消息
窗户。addevent侦听器( message ，this.handleMessage)
//获得内联框架的窗户对象
iframeWin=this .$refs.iframe.contentWindow
},
方法：{
iframeLoad() {
this.isLoaded=true
window.console.log("地图准备就绪")
},
异步handleMessage() {//接收来自内联框架的消息
这个。require=iframewin。要求；
这个。IMAP=iframewin。IMAP
},
负载层（节点、服务器){
//加载图层
this.iMap.layerHandler.load(节点、服务器);
}
}
}
三、iframe接口
Map.vue是一个组件，它要跟它所在的组件或页面进行通信。
现在，Map.vue放在了一个容器页面Home.vue(即测试页面)里，里面还有一个命令组件Layer.vue。点击命令组件里的按钮，地图要做出相应的响应。其中的原理如下：
命令组件的按钮点击后，发射信息到容器页面，然后容器页面调用地图组件的方法。
测试页面Home.vue
模板
div id=app1
div id=地图容器
差异地图组件/div
Map id= Map ref= Map size= 100 /Map
/div
div id=图层-容器
差异其他组件/div
Layer @ load Layer= load Layer @ loadCloud= loadCloud @ clear= clear map /Layer
/div
/div
/模板
脚本
导入地图自./components/Map.vue
导入图层自./components/Layer.vue
导出默认值{
名称："应用程序",
组件：{
地图，
层
},
方法：{
负载层(节点，服务器){//加载图层
让地图=这个. refs.map
map.loadLayer(节点、服务器);
},
装载云(数据){//加载卫星云图
让地图=这个. refs.map
map.require([drawlib/Cloud]，function (Cloud) {
设iMap=map.iMap
设cloudId= cloud
让云=新云(IMAP。地图)；
iMap.drawHandler.push(cloudId，cloud)；
cloud.draw(数据，cloudId)；
});
},
clearMap(){//清除
让地图=这个. refs.map
地图。IMAP。clear()；
}
}
}
/脚本
风格。
/风格
命令组件Layer.vue
模板
div class=层容器
button @click=loadLayer 加载图层/按钮
button @click=loadCloud 卫星云图/按钮
button @click=clear 清除/按钮
/div
/模板
脚本
导出默认值{
方法：{
loadLayer() {
让节点=.
让服务器=.
这个emit(loadLayer )，节点，服务器)
},
loadCloud(){
让数据=.
这个. emit(loadCloud ，data)；
},
clear(){
这个. emit( clear )；
}
},
}
/脚本
style scoped="scoped "。
/风格
注意命令组件发射消息中指定的方法，在容器页面中都有相关的属性与之对应：
命令组件
loadCloud(){
让数据=.
这个. emit(loadCloud ，data)；
},
容器页面
Layer @ load Layer= load Layer @ load cloud= load cloud @ clear= clear map /Layer
四、外部接口
五、运行结果
其他组件必须通过容器页面与地图组件交互，其他组件与地图组件没有直接交互。这其实是一种命令模式。优点是其他组件与map组件解耦，它们没有耦合在一起，这意味着它们互不影响。这有利于地图组件本身的扩展和优化。如果有缺点，所有的东西都要通过容器页面转发，容器页面的代码可能是多余的。有些方法简直就是传声筒，给人一种重复写作的感觉，意义不大。
以上是开发一个封装iframe的vue组件的详细内容。更多关于封装iframe的vue组件的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。