英文:
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&amp;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&amp;output=embed&hl=en';
});
</script>
注意：这是我的GTmetrix问题，只是分享以完成我的问题：
-
有5个静态组件没有远期到期日期。
- 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
-
存在1个重定向
英文:
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&amp;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&amp;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&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&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:
<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>
There is a message in the javscript console:
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'.
However, if the <iframe> is created dynamically also, it works (note that the source is set before it is appended to the 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>
code snippet:
<!-- 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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论