Google Maps使用iframe,在页面加载后不起作用。

huangapple go评论97阅读模式
英文:

Google Maps with iframe doesn't work after page load

问题

我的谷歌地图在我的网站上运行正常:

<iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en"></iframe>

因为GTmetrix的原因,我需要进行更改。所以我决定在页面加载时加载它,以下是我的新代码,不会加载地图。

<iframe id='iframe1'></iframe>

<script>
    window.addEventListener("load", function() {
        document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
    });
</script>

注意:这是我的GTmetrix问题,只是分享以完成我的问题:

英文:

My google map works fine on my site:

<iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en"></iframe>

I should to change it, because of GTmetrix. So I decide to load it when page is loaded, here is my new code that doesn't load the map.

 <iframe id='iframe1' ></iframe>
 
    <script>
        window.addEventListener("load", function() {
            document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
        });
    </script>

Note: here is my problem with Gtmetrix, just sharing to complete my question:

> There are 5 static components without a far-future expiration date.
>
> https://maps.googleapis.com/maps/api/js?client=google-maps-embed&paint_origin=&libraries=geometry,search&v=3.exp&language=fa&callback=onApiLoad
> https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i10787022&2i6603899&2e1&3u16&4m2&1u543&2u300&5m5&1e0&5sfa&6sus&10b1&12b1&client=google-maps-embed&token=64085
> https://khms1.googleapis.com/kh?v=862&hl=fa&x=5267&y=3224&z=13
> https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71592679292299&2d51.45263317535978&2m2&1d35.73212757327154&2d51.488170370963076&2u16&4sfa&5e0&6sm%40496000000&7b0&8e0&11e289&callback=_xdc_._ng5r7i&client=google-maps-embed&token=4563
> https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d35.71552264420163&2d51.46028412421049&2m2&1d35.73193943495472&2d51.48040793223049&2u13&4sfa&5e2&7b0&8e0&11e289&callback=_xdc_._iyqfq0&client=google-maps-embed&token=32784
>
>
> There is 1 redirect
>
> https://maps.google.com/maps?... redirects to https://www.google.com/maps/embed?...

答案1

得分: 4

使用您的代码:

<iframe id='iframe1' src="about:blank"></iframe>
<script>
  window.addEventListener("load", function() {
    document.getElementById('iframe1').src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&amp;output=embed&hl=en';
  });
</script>

JavaScript控制台中出现以下消息:

Refused to display 'https://www.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z%3D14&ie=UTF8&amp;output=embed&hl=en' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

然而,如果<iframe>也是动态创建的,它可以工作(请注意,在将其附加到DOM之前设置了源):

<div id="anchor"></div>
<script>
  window.addEventListener("load", function() {
    var iDiv = document.createElement('iframe');
    iDiv.id = 'iframe1';
    iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
    document.getElementById("anchor").appendChild(iDiv);
  });
</script>

代码片段:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div id="anchor"></div>

<script>
  window.addEventListener("load", function() {
    var iDiv = document.createElement('iframe');
    iDiv.id = 'iframe1';
    iDiv.src = 'https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en';
    document.getElementById("anchor").appendChild(iDiv);
  });

</script>

<!-- end snippet -->
英文:

Using your code:

 &lt;iframe id=&#39;iframe1&#39; src=&quot;about:blank&quot;&gt;&lt;/iframe&gt;
 &lt;script&gt;
   window.addEventListener(&quot;load&quot;, function() {
     document.getElementById(&#39;iframe1&#39;).src = &#39;https://maps.google.com/maps?q=25.1954875,-111.6649204&amp;hl=fa;z=14&amp;ie=UTF8&amp;amp;output=embed&amp;hl=en&#39;;
   });
 &lt;/script&gt;

There is a message in the javscript console:

Refused to display &#39;https://www.google.com/maps?q=25.1954875,-111.6649204&amp;hl=fa;z%3D14&amp;ie=UTF8&amp;amp;output=embed&amp;hl=en&#39; in a frame because it set &#39;X-Frame-Options&#39; to &#39;sameorigin&#39;.

However, if the &lt;iframe&gt; is created dynamically also, it works (note that the source is set before it is appended to the DOM):

<div id="anchor"></div>

 &lt;script&gt;
   window.addEventListener(&quot;load&quot;, function() {
     var iDiv = document.createElement(&#39;iframe&#39;);
     iDiv.id = &#39;iframe1&#39;;
     iDiv.src = &#39;https://maps.google.com/maps?q=25.1954875,-111.6649204&amp;hl=fa;z=14&amp;ie=UTF8&amp;output=embed&amp;hl=en&#39;;
     document.getElementById(&quot;anchor&quot;).appendChild(iDiv);
   });
 &lt;/script&gt;

code snippet:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;div id=&quot;anchor&quot;&gt;&lt;/div&gt;

&lt;script&gt;
  window.addEventListener(&quot;load&quot;, function() {
    var iDiv = document.createElement(&#39;iframe&#39;);
    iDiv.id = &#39;iframe1&#39;;
    iDiv.src = &#39;https://maps.google.com/maps?q=25.1954875,-111.6649204&amp;hl=fa;z=14&amp;ie=UTF8&amp;output=embed&amp;hl=en&#39;;
    document.getElementById(&quot;anchor&quot;).appendChild(iDiv);
  });

&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月4日 01:58:08
  • 转载请务必保留本文链接:https://go.coder-hub.com/59583184.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定