Question

我正在尝试使用谷歌地图的<iframe>包含，但是由于不匹配，控制台会抛出几个错误，但没有明显的不匹配，所以我假设它必须是一个函数/谷歌地图一边处理。

具体来说，使用maps.google.com，根据this，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，而地图网址是http，为什么会出现不匹配问题，如何解决此问题以使其匹配？

Answer 1

这确实是可嵌入HTML代码的错误，由独立的Google地图页面创建（maps.google.com - >点击链接链接按钮以获取基于iframe的HTML代码。）
正如aSeptik在您的问题评论中所述，相应的错误报告can be found here。

如果您使用Maps API嵌入Google地图，则可以避免该错误。如果您直接在页面中或嵌入式iframe中使用Maps API，这确实没有任何区别 - 两种方式都可以正常工作。

以下是我在iframe中使用Maps API的其他地图的an example。

此处是使用Maps API的您自己的地图的an example - 嵌入在页面中。

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。

Answer 2

将属性crossorigin="anonymous"添加到</iframe>解决了问题：

示例：

＆＃13;

<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>

＆＃13;

Answer 3

不能说aSeptik提到的错误，但如果你想避免http / https问题，就不要在URL中写它。

例如：写下“//maps.google.com”，而不是写出会导致收到警告的“http://maps.google.com”，这将自动采用当前的会话方案（http / https）并制作API调用。

希望这有帮助。

获取http / https协议以匹配maps.google.com </iframe>的<iframe>

3 个答案: