Leaflet中BindPopup内iframe链接加载失败问题求助

我尝试在Leaflet的BindPopup组件的<iframe>中显示外部网站，但加载失败（截图：）。以下是我在Python folium中嵌入的JavaScript代码：

{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) {
    // 设置标记可拖拽
    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设置有关，于是尝试修改URL，但问题依旧，也不清楚window.location.replace(url);该放在哪里：

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

核心问题 #

这不是你的代码问题，而是wp.pl网站通过X-Frame-Options或Content-Security-Policy (CSP) 安全头，明确禁止自身被嵌入到其他域名的iframe中，这是网站的防盗链和安全防护措施。

为什么修改URL无效？ #

你添加的&output=embed是YouTube、Google Docs这类支持嵌入的平台专用参数，但wp.pl本身不提供任何嵌入模式，所以这个参数对它完全不起作用。

可行替代方案 #

1. 替换为跳转链接：放弃iframe，改用普通链接让用户在新窗口打开网站，这是最合规的方式：

   const MarkerInfo = '<a href="https://www.wp.pl/" target="_blank">打开wp.pl</a><center><button type="button" class="remove">删除标记？</button></center>'
   

2. 使用代理中转：如果必须实现嵌入，可以搭建一个简单的代理服务器，先请求wp.pl的内容再返回给你的页面，但注意要遵守目标网站的使用条款和版权规定，避免法律风险。

关于window.location.replace(url) #

这个方法是用来在当前窗口跳转页面的，和iframe嵌入场景无关，你完全不需要用到它。

内容的提问来源于stack exchange，提问作者Geographos