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

最新推荐文章于 2023-10-30 15:23:21 发布

VIP文章 apple_pingwan

最新推荐文章于 2023-10-30 15:23:21 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/apple_pingwan/article/details/114639966

版权

公司内部开发了一套属于自己的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{

最低0.47元/天解锁文章

apple_pingwan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
iframe嵌套html页面跨域通信问题

公司内部开发了一套属于自己的c2插件，平时工作都是基于c2平台使用eclipse进行项目开发。在其中一个项目中，开发的系统访问时路径中都带有#（例：http://localhost:8080/context/#/f/formId），在项目中要用到百度地图，于是在index.html中引入了在线的百度api，用示例的地址可以正常访问，但是，应项目需求，访问时要去掉地址中的#（例：http://localhost:8080/context/f/formId），此时访问便出现了问题，加在index.html页面
复制链接

扫一扫