Leaflet - Iframe link in BindPopup refuses loading

Question

I would like to display some external websites in the <iframe> selector in the BindPopup in Leaflet. I have no clue why I am facing a situation such as this:

My JavaScript code (embedded in Python folium) looks like this:

 {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}`;
  }

Am I missing something?

UPDATE:

After reading this thread:

Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

I've changed my URL to:

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

Unfortunately still the same. It seem like I don't know where the: window.location.replace(url); should come

Would it suffice to get the content of the site and only display it in the iframe? — Lajos Arpad, Dec 09 '22 at 11:16
In the case of webcams - YES. Like in the link below: https://www.shetlandwebcams.com/cliff-cam/ I would like to see the full-screen mode in the iframe thumbnail. Is it possible? — Geographos, Dec 09 '22 at 11:43
I see no easy way to achieve this. Because of the `X-Frame-Options: DENY` you can't display the site in an iframe. A way would be to take a screenshot from the website and load it as an image — Falke Design, Dec 10 '22 at 11:39
Ok, but is there any way at all to do it? I would love to have it sorted in the case of webcams. — Geographos, Dec 12 '22 at 20:03

Chimera · Answer 1 · 2022-12-15T11:02:16.327

0

The problem is most likely that the site you are trying to include, does not allow it to be included in IFrames. If you inspect the site in devtools it has the header x-frame-options: DENY, which tells the browser that it does not allow it to be included in an iFrame. You can read more about it here: MDN page about x-frame-options

Example why x-frame-options is used and is important

edited Dec 15 '22 at 11:02

answered Dec 09 '22 at 09:22

Chimera

149
1
13

I've updated my query. Any hints how to change that in the code? – Geographos Dec 09 '22 at 16:33
Honestly, i would say that it isn't possible, as that would defeat the purpose of the header, as you are still trying to set it in an iFrame. Maybe make a button when it opens up in a small new window instead? – Chimera Dec 10 '22 at 21:09
I would rather have the thumbnail in the popup if it's possible at all. Could you explain to me why is the reason that simply doesn't work? – Geographos Dec 15 '22 at 09:42
The reason is the header that the webserver responds with. Check out the link i posted, that might do a better job of explaining it, but basically the webserver returns with a header that tells your browser that it doesn't want this content put in an iFrame. It's for security purposes. Think if your online banking is put in an iFrame and you put a layer on top of it to record all activity on a malicious site that you have lured people to. – Chimera Dec 15 '22 at 10:59
I added a link that shows why this header exists, and why it's important. – Chimera Dec 15 '22 at 11:02

score -1 · Answer 2 · answered Dec 09 '22 at 09:16

-1

The problem may be that you are mixing ' quotes and ". Follow the quotes hierarchy. First, use double quotes then single ones.

answered Dec 09 '22 at 09:16

Yi Qiang Ji

28
4

No, it doesn't work unfortunately. – Geographos Dec 09 '22 at 15:02
1

Quotes are interchangeable in JavaScript, so long as they properly balanced. If in doubt, use the [HTML standard representations](https://www.w3.org/wiki/Common_HTML_entities_used_for_typography). – Paul Dec 09 '22 at 15:18

Leaflet - Iframe link in BindPopup refuses loading

2 Answers2