Javascript 获取 http/https 协议以与 maps.google.com 的 <iframe> 匹配
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13555261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting http/https protocols to match with <iframe> for maps.google.com
提问by chris Frisina
I am trying to use an <iframe>include of a google map, however the console is throwing several errors due to a mismatch, but there is no apparent mismatch, so I'm assuming it must be a function/process on the side of google maps.
我正在尝试使用<iframe>谷歌地图的包含，但是由于不匹配，控制台抛出了几个错误，但没有明显的不匹配，所以我假设它必须是谷歌地图方面的一个函数/进程。
Specifically with maps.google.com, there appears to be a change to the script for the iframe, according to this.
根据this，特别是在 maps.google.com 中，iframe 的脚本似乎发生了变化。
The errors in the console is this: ( I am getting at least 30 errors on page load )
控制台中的错误是这样的：（我在页面加载时收到至少 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.
Since my site is http and NOT https, and the map url is http, why is the mismatch occuring, and how do I fix this to make them match?
由于我的网站是 http 而不是 https，并且地图 url 是 http，为什么会发生不匹配，我该如何解决这个问题以使它们匹配？
回答by Jpsy
This really is a bug of the embeddable HTML code, created by the standalone Google Maps page (maps.google.com-> click on link chain button to get the iframe based HTML code).
As said by aSeptik in the comments to your question, the corresponding bug report can be found here.
这确实是由独立的 Google 地图页面（maps.google.com-> 单击链接链按钮以获取基于 iframe 的 HTML 代码）创建的可嵌入 HTML 代码的错误。
正如 aSeptik 在对您的问题的评论中所说，可以在此处找到相应的错误报告。
You can avoid that bug if you embed a Google Map using the Maps API. It does make no difference if you use the Maps API directly in your page or within an embedded iframe - both ways work fine.
如果您使用 Maps API 嵌入 Google 地图，则可以避免该错误。如果您直接在页面中或在嵌入式 iframe 中使用 Maps API，这并没有什么区别 - 两种方式都可以正常工作。
Here is an exampleof some other map where I have used the Maps API within an iframe.
这是我在 iframe 中使用 Maps API 的其他一些地图的示例。
And here is an exampleof your own mapusing the Maps API - embedded right within the page.
下面是一个使用 Maps API的您自己的地图示例- 嵌入在页面中。
The additional code needed for the Maps API is actually very small:
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>
I have used jQuery here for convenience.
为方便起见，我在这里使用了 jQuery。
回答by imcg
Adding the attribute crossorigin="anonymous"to the </iframe>solves the issue:
将属性添加crossorigin="anonymous"到</iframe>解决了问题：
Example:
例子：
<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"
width="400"
height="300"
frameborder="0"
allowfullscreen>
</iframe>回答by Saad Ulde
Cant say about the bug that aSeptik mentioned, but if you want to avoid the http/https issue simply dont write it in the URL.
不能说 aSeptik 提到的错误，但是如果您想避免 http/https 问题，请不要在 URL 中写入它。
Eg: Instead of writing 'http://maps.google.com' which will result in the warning you received, write '//maps.google.com', this will automatically take the current sessions scheme (http/https) and make the API call.
例如：不要写“ http://maps.google.com”这会导致您收到警告，而是写“//maps.google.com”，这将自动采用当前会话方案（http/https）和进行 API 调用。
Hope this helps.
希望这可以帮助。
