如何在Folium Popup中嵌入Plotly HTML图表？

• 可正常将PNG图片嵌入Folium弹窗，但嵌入Plotly生成的HTML图表时出现两种异常：
  1. 弹窗显示空白白框（对应尝试代码1）
  2. 图表直接覆盖地图，无正常地图显示（对应尝试代码2）
• 已确认文件路径正确，尝试多种写法无效，寻求解决方法

用户提供的代码片段 #

可行的PNG嵌入代码 #

html1 ='<iframe src="data:image/png;base64,{}"></iframe>'.format
encoded = base64.b64encode(open('example.png', 'rb').read()).decode()
iframe = IFrame(html1(encoded), width=200+20, height=200+20)
 
folium.Marker(
location = (df_beet_20.Lat[i], df_beet_20.Long[i]),
popup = folium.Popup(iframe, max_width=1000),
icon = folium.Icon(
icon = i_dict['Beetus'], color = c_dict['Beetus'])).add_to(beetus_20)

尝试嵌入HTML图表的代码1（空白弹窗） #

html1 = '<iframe src="data:text/html;base64,{}"></iframe>'.format
encoded = base64.b64encode(open('Erie_fig.html', 'rb').read()).decode()

marker = folium.Marker(
    location=(df_beet_20.Lat[i], df_beet_20.Long[i]),
    icon=folium.Icon(icon=i_dict['Beetus'], color=c_dict['Beetus'])).add_to(beetus_20)

from folium import IFrame
iframe = IFrame(html1(encoded), width=200+20, height=200+20)
folium.Popup(iframe, max_width=1000).add_to(marker)

尝试嵌入HTML图表的代码2（图表覆盖地图） #

with open('Erie_fig.html', 'r') as f:
    html = f.read()
encoded = base64.b64encode(html.encode()).decode()
iframe = IFrame(html, width=600, height=400)
marker = folium.Marker(
    location=(df_beet_20.Lat[i], df_beet_20.Long[i]),
    popup=folium.Popup(iframe, max_width=1000),
    icon=folium.Icon(icon=i_dict['Beetus'], color=c_dict['Beetus']))
marker.add_to(beetus_20)

Plotly生成的HTML包含外部CDN资源引用，直接嵌入时会因权限、同源策略或DOM冲突导致异常，以下是两种可靠方案：

方案1：转为静态图片嵌入（简单直接） #

将Plotly图表导出为PNG，复用已验证的PNG嵌入逻辑：

import plotly.io as pio
# 假设fig是你的Plotly图表对象
pio.write_image(fig, 'Erie_fig.png')

# 复用PNG嵌入代码
html1 ='<iframe src="data:image/png;base64,{}"></iframe>'.format
encoded = base64.b64encode(open('Erie_fig.png', 'rb').read()).decode()
iframe = IFrame(html1(encoded), width=220, height=220)
 
folium.Marker(
    location = (df_beet_20.Lat[i], df_beet_20.Long[i]),
    popup = folium.Popup(iframe, max_width=1000),
    icon = folium.Icon(icon=i_dict['Beetus'], color=c_dict['Beetus'])
).add_to(beetus_20)

注意：需提前安装依赖pip install kaleido（Plotly导出图片的工具）

方案2：正确嵌入交互式Plotly HTML #

通过配置iframe的sandbox属性，限制Plotly页面的权限，避免干扰Folium地图：

from folium import IFrame, Popup, Marker, Icon

# 读取Plotly HTML文件
with open('Erie_fig.html', 'r', encoding='utf-8') as f:
    plotly_html = f.read()

# 构造带权限限制的iframe
iframe = IFrame(
    plotly_html,
    width=600,
    height=400,
    sandbox='allow-scripts allow-same-origin'  # 允许脚本执行和同源资源访问
)

# 创建弹窗并绑定标记
popup = Popup(iframe, max_width=600)
Marker(
    location=(df_beet_20.Lat[i], df_beet_20.Long[i]),
    popup=popup,
    icon=Icon(icon=i_dict['Beetus'], color=c_dict['Beetus'])
).add_to(beetus_20)

关键说明：

• sandbox属性防止Plotly的全局JS修改Folium地图的DOM结构
• 弹窗max_width需与iframe的width保持一致，避免拉伸异常
• 若仍有加载问题，可将Plotly HTML中的外部CDN资源替换为本地文件（操作较繁琐）

原代码失效原因 #

• 代码1：base64编码的HTML在iframe中加载时，Plotly的外部JS/CSS因同源策略无法正常加载，导致弹窗空白
• 代码2：未限制Plotly页面的权限，其全局JS覆盖了Folium地图的渲染逻辑，导致地图被覆盖

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