让 http/https 协议与 maps.google.com 的 <iframe> 匹配答案

【问题标题】：Getting http/https protocols to match with <iframe> for maps.google.com让 http/https 协议与 maps.google.com 的 <iframe> 匹配
【发布时间】：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 标记）吗？
maps.google.com/maps/… />在较大的地图中查看 <a href="/default/index/tourl?u=PGEgaHJlZj0%3D" http: rel="nofollow" target="_blank">maps.google.com/maps/…</a>" style="color:#0000FF;text-align:left">夏洛特
我无法重现您的问题。以下 jsFiddle 显示了我测试过的代码：jsfiddle.net/YNwGL 它在 Chrome、FF 和 IE9 中加载时没有任何警告。我猜谷歌已经解决了这个问题。
@Jpsy 如果您不介意，请看这里evernote.com/shard/s55/sh/0ddc8d59-1337-4b50-95de-d5e56efc5e38/…

标签： javascript http google-maps https protocols

【解决方案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"
        width="400"
        height="300"
        frameborder="0"
        allowfullscreen>
</iframe>

【讨论】：

【解决方案3】：

不能说 aSeptik 提到的错误，但是如果您想避免 http/https 问题，请不要将其写在 URL 中。

例如：不要写 'http://maps.google.com' 会导致您收到警告，而是写 '//maps.google.com'，这将自动采用当前会话方案 (http/https) 并生成 API称呼。

希望这会有所帮助。

【讨论】：

这并不能解决问题。也不能解决在 Gmaps 调用前加上 http:// 的问题。