让 http/https 协议与 maps.google.com 的 <iframe> 匹配
Posted
技术标签:
【中文标题】让 http/https 协议与 maps.google.com 的 <iframe> 匹配【英文标题】：Getting http/https protocols to match with <iframe> for maps.google.com 【发布时间】：2012-11-13 08:43:59 【问题描述】：我正在尝试使用谷歌地图的<iframe> 包含，但是由于不匹配，控制台抛出了几个错误，但没有明显的不匹配，所以我假设它必须是一个函数/进程谷歌地图的一侧。
根据this，特别是对于 maps.google.com，iframe 的脚本似乎发生了变化。
控制台中的错误是这样的：（我在页面加载时遇到至少 30 个错误）
Unsafe javascript attempt to access frame with URL http://www.developer.host.com/ from
frame with URL https://maps.google.com/maps/msmsa=0&msid=
212043342089249462794.00048cfeb10fb9d85b995&ie=UTF8&t=
m&ll=35.234403,-80.822296&spn=0.392595,0.137329&z=10&output=embed.
The frame requesting access has a protocol of 'https', the frame being
accessed has a protocol of 'http'. Protocols must match.
由于我的网站是 http 而不是 https，并且地图 url 是 http，为什么会发生不匹配，我该如何解决这个问题以使它们匹配？
【问题讨论】：
这不是你的错，这是谷歌的错误code.google.com/p/chromium/issues/detail?id=43173 您能告诉我们确切的嵌入代码（html 标记）吗？ 我无法重现您的问题。以下 jsFiddle 显示了我测试过的代码：jsfiddle.net/YNwGL 它在 Chrome、FF 和 IE9 中加载时没有任何警告。我猜谷歌已经解决了这个问题。 @Jpsy 如果您不介意，请看这里evernote.com/shard/s55/sh/0ddc8d59-1337-4b50-95de-d5e56efc5e38/… 【参考方案1】：这确实是由独立的 Google 地图页面创建的可嵌入 HTML 代码的错误（maps.google.com -> 单击链接链按钮以获取基于 iframe 的 HTML 代码）。 正如 aSeptik 在 cmets 中对您的问题所说，相应的错误报告 can be found here。
如果您使用 Maps API 嵌入 Google 地图，则可以避免该错误。如果您直接在页面中或在嵌入的 iframe 中使用 Maps API，这并没有什么区别 - 两种方式都可以正常工作。
这是我在 iframe 中使用 Maps API 的其他地图的 an example。
这里是 您自己的地图的an example，使用 Maps API - 嵌入在页面中。
Maps API 所需的额外代码实际上非常少：
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
$(function()
var myOptions =
center: new google.maps.LatLng(35.201867,-80.836029),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
;
gMap = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var kmlLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?ie=UTF8&t=m&authuser=0&msa=0&output=kml&msid=212043342089249462794.00048cfeb10fb9d85b995');
kmlLayer.setMap(gMap);
);
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
</body>
为了方便，我在这里使用了 jQuery。
【讨论】：
【参考方案2】：将属性crossorigin="anonymous" 添加到</iframe> 可以解决问题：
例子：
<iframe
crossorigin="anonymous"
src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10005.660822865373!2d6.3855055!3d51.1745698!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbc2d05dc3af26862!2sBORUSSIA-PARK!5e0!3m2!1sen!2suk!4v1448289882279"
frameborder="0"
allowfullscreen>
</iframe>【讨论】：
【参考方案3】：不能说 aSeptik 提到的错误，但是如果您想避免 http/https 问题，请不要将其写在 URL 中。
例如：不要写 'http://maps.google.com' 会导致您收到警告，而是写 '//maps.google.com'，这将自动采用当前会话方案 (http/https) 并生成 API称呼。
希望这会有所帮助。
【讨论】：
这并不能解决问题。也不能解决在 Gmaps 调用前加上http:// 的问题。以上是关于让 http/https 协议与 maps.google.com 的 <iframe> 匹配的主要内容，如果未能解决你的问题，请参考以下文章