Google Maps with iframe doesn't work after page load
我的Google地图在我的网站上运行正常:
1 | <iframe id='iframe1' src="https://maps.google.com/maps?q=25.1954875,-111.6649204&hl=fa;z=14&ie=UTF8&output=embed&hl=en"></iframex> |
由于GTmetrix,我应该更改它。因此,我决定在加载页面时加载它,这是我的新代码,它不会加载地图。
1 2 3 4 5 6 | <iframe id='iframe1' ></iframex> 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'; }); |
注意:这是我与Gtmetrix有关的问题,只需分享即可完成我的问题:
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=32784There is 1 redirect
1 https://maps.google.com/maps?... redirects to https://www.google.com/maps/embed?...
使用您的代码:
1 2 3 4 5 | <iframe id='iframe1' src="about:blank"></iframex> 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'; }); |
在javscript控制台中有一条消息:
1 | 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'. |
但是,如果
1 2 3 4 5 6 | 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); }); |
代码段:
1 2 3 4 5 6 | 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); }); |