iframe嵌套html页面跨域通信问题

公司内部开发了一套属于自己的c2插件,平时工作都是基于c2平台使用eclipse进行项目开发。
在其中一个项目中,开发的系统访问时路径中都带有#(例:http://localhost:8080/context/#/f/formId),在项目中要用到百度地图,于是在index.html中引入了在线的百度api,用示例的地址可以正常访问,但是,应项目需求,访问时要去掉地址中的#(例:http://localhost:8080/context/f/formId),此时访问便出现了问题,加在index.html页面中的百度js加载不出来,导致项目中的地图不能正常显示。
为了解决这一问题,所有要展示地图的页面都通过iframe嵌套一个纯html页面,在该html页面中引入百度js,此时地图页面可正常显示。
一、步骤如下:
1、在要展示地图的页面加入iframe

<iframe id="journeyMapIframe" width="100%" height="200px" frameborder="0"></iframe>

2、应项目需求,要将页面参数传到地图页面,于是,在js中赋值iframe的src

if(document.getElementById('journeyMapIframe')){
	$("#journeyMapIframe").attr("src","./previewMap.html?colId="+geo.colId);
}

3、在previewMap.html中加入地图相关代码即可

<!DOCTYPE html>
<html >
<head>
	<!-- jquery v1.11.1 -->
	<script src="assets/jquery.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>
	<style type="text/css">
		#allmap-Preview{
			min-height: 200px !important;
		}
	</style>

</head>
<body>
	<div >
		<div class="col-sm-12   no-padding">
			<div id="allmap-Preview" style="min-height:700px;width:100%;border: 1px solid #dadada;"></div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var colId = window.parent.document.getElementById("journeyMapIframe").contentWindow.location.search.substr(1).split("=")[1];
    jQuery.ajax({
        type:"get",  //请求方式
        url:"sponsorPersonal/getPubContenByActivityId?colId="+colId,  
        data: colId,     //参数
        dataType:"json", 
        contentType:"application/json; charset=utf-8",
        beforeSend:function(XMLHttpRequest){ 
        	
        },
        success:function(data){debugger  //成功
        	if(data){
        		var zoom = 15;
            	var geo = JSON.parse(data.remark2)
    	    	var map = new BMap.Map("allmap-Preview"),
    	    		point = new BMap.Point(geo.lng, geo.lat);
    	    	map.centerAndZoom(point, zoom);
    	    	map.disableDragging();
    	    	var marker = new BMap.Marker(point);
    	    	map.addOverlay(marker);
    	    	var label = new BMap.Label(data.remark, {offset:new BMap.Size(-50,-30)});
    	    	label.setStyle({
    	    		maxWidth:'none',
    	            padding:"2px",
    	            color : "#333",
    	            fontSize : "12px",
    	        });
    	    	marker.setLabel(label);
    	    	//标注居中
    	    	var com = document.getElementById("allmap-Preview");
    	    	if(com.offsetWidth == 0){
    	    		//以像素为单位,沿x方向和y方向移动地图,x向右为正,y向下为正
    	    		map.panBy(180, 125);
    	    	}
        	}
        },
        error:function(obj, msg, e){   //异常
            console.log("OH,NO");
        }   
    })   ;	
</script>

二、使用过程中遇到的问题及解决方案:
1、应项目需求,iframe父子页面之间要进行通信,通过在网上查找资料发现:在父页面加载完成之后调用postMessage方法(记住:一定要是id为journeyMapIframe的iframe元素加载完成之后调用)

document.getElementById('journeyMapIframe')
         .contentWindow.postMessage(message, 
                orignal)

在子页面添加代码接收消息

window.addEventListener('message',function(event){
        console.log(event);
        // event.origin 来源
        // event.data 数据
    }, false);

而我在基于c2平台开发的项目中发现iframe元素还没有加载便已经在向子页面传送消息,导致前端报错。于是我选择了第一点中的第二小点,动态的赋值src。
2、父页面向子页面传送了消息,那也少不了子页面要向父页面传送消息。于是,在子页面中加入代码

//发送消息
top.postMessage(message)

父页面中加入代码

//接收消息
window.addEventListener('message', function(event){
		if(event.data){
			$model.content.remark = event.data.remark;
			$model.content.remark2 = event.data.remark2;
			$model.content.remark3 = event.data.remark3;
			$model.content.remark4 = event.data.remark4;
			$model.content.remark5 = event.data.remark5;
		}
}, false);

这样,父子页面之间便可以互通来往了。
以上是我在项目开发中遇到的问题及解决的方法,本身不是前端专业,如有更好的办法欢迎大家留言告知,谢谢!

  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值