Leaflet - BindPopup 中的 Iframe 鏈接拒絕加載

Question

我想在 Leaflet 的BindPopup的<iframe>選擇器中顯示一些外部網站。 我不知道為什么我會遇到這樣的情況：

我的 JavaScript 代碼（嵌入在 Python folium 中）如下所示：

 {map}.on("click", addMarker);

  const MarkerInfo = '<iframe src="https://www.wp.pl/" width="300"></iframe><center><button 
  type="button" class="remove">delete marker?</button></center>'

  const markerPlace = document.querySelector('.marker-position');

  function addMarker(e) {
  // ustawiamy aby marker był przesuwalny
  const marker = new L.marker(e.latlng, {
  draggable: true,
  }).addTo({map}).bindPopup(MarkerInfo);
   marker.on("popupopen", removeMarker);
   marker.on('dragend', dragedMarker);
   markerPlace.textContent = `new marker: ${e.latlng.lat}, ${e.latlng.lng}`;
  }

我錯過了什么嗎？

更新：

閱讀此線程后：

拒絕在框架中顯示，因為它將“X-Frame-Options”設置為“SAMEORIGIN”

我已將網址更改為：

     const MarkerInfo = "<iframe src='https://www.wp.pl/' width='300'&output=embed></iframe><center><button type='button' class='remove'>delete marker?</button></center>"

可惜還是一樣。 好像我不知道在哪里： window.location.replace(url); 應該來

Answer 1

問題很可能是您嘗試包含的站點不允許將其包含在 IFrame 中。 如果您在 devtools 中檢查該站點，它有標題 x-frame-options: DENY，它告訴瀏覽器它不允許它包含在 iFrame 中。 您可以在這里閱讀更多相關信息： 關於 x-frame-options 的 MDN 頁面

為什么使用 x-frame-options 並且很重要的示例

Answer 2

問題可能是您混合了'引號和" 。遵循引號層次結構。首先，使用雙引號，然后使用單引號。