javascript - 获取 http/https 协议(protocol)以匹配 maps.google.com 的 <iframe>

标签 javascript http google-maps https protocols

我正在尝试使用 <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,并且 map url 是 http,为什么会出现不匹配,我该如何解决这个问题才能使它们匹配?

最佳答案

这确实是可嵌入 HTML 代码的错误,由独立的 Google map 页面创建(maps.google.com -> 单击链接链按钮获取基于 iframe 的 HTML 代码)。
正如 aSeptik 在对您的问题的评论中所说,相应的错误报告 can be found here .

如果您使用 Maps API 嵌入 Google map ,则可以避免该错误。如果您直接在页面中或在嵌入式 iframe 中使用 Maps API,这并没有什么区别 - 两种方式都可以正常工作。

这里是 an example我在 iframe 中使用了 Maps API 的一些其他 map 。

这里是 an example 您自己的 map 使用 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。

关于javascript - 获取 http/https 协议(protocol)以匹配 maps.google.com 的 &lt;iframe&gt;,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13555261/

相关文章:

javascript - Select2 下拉列表动态添加、删除和刷新项目

c++ - 使用字符串形成 HTTP 响应

java - Jersey SSE - 事件 Output.write 在发送第一条消息后抛出空指针

Android 将热图连接到当前位置

javascript - 在删除按钮上 Bootstrap 多个数据切换?

javascript - 如何使用 jQuery 制作下拉列表过滤器

http - IIS和HTTP流水线,并行处理请求

android - 除了少数标记外,如何清除 Google map v2?

javascript - 更改谷歌地图标记的图标

javascript - Angular : removing ng-hide/show for print version of the page