Getting http/https protocols to match with <ifr

2019-01-23 23:48发布

站内问答 / JavaScript
1623 3 4

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.

Specifically with maps.google.com, there appears to be a change to the script for the iframe, according to this.

The errors in the console is this: ( I am getting at least 30 errors on page load )

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?

3条回答
SAY GOODBYE
2楼-- · 2019-01-24 00:20

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.

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.

Here is an example of some other map where I have used the Maps API within an iframe.

And here is an example of your own map using the Maps API - embedded right within the page.

The additional code needed for the Maps API is actually very small:

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

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
3楼-- · 2019-01-24 00:28

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.

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.

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
4楼-- · 2019-01-24 00:35

Adding the attribute crossorigin="anonymous" to the </iframe> solves the issue:

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>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)