javascript - 在reveal.js中嵌入本地html文件

Question

我要导入bokeh我的 reveal.js 中的交互式图表演示。

我能做什么

1. 我可以使用 iframe 将 html 内容嵌入到 Reveal.js 中:

<iframe data-src="https://demo.bokeh.org/sliders" 
width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" 
scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width:
100%;" allowfullscreen=""></iframe>

我可以以 html 格式保存 Bokeh 图:

from bokeh.plotting import figure, output_file, show

output_file("/line.html")
p = figure(plot_width=400, plot_height=400)
p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
show(p)

这会产生一个文件line.html当我使用网络浏览器打开它时，我可以看到它并与之交互。

我不能做什么

嵌入我的line.html Reveal.js 中的文件。

我尝试过:

1. <iframe data-src="/Users/JohnDoe/line.html" width="945" height="555" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="border:3px solid #666; margin-bottom:5px; max-width: 600%;" allowfullscreen=""></iframe>

   这会导致消息 Cannot GET /Users/JohnDoe/line.html显示在我的 iframe 中。

2. <iframe data-src="file:///Users/JohnDoe/line.html" width="945" height="555" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="border:3px solid #666; margin-bottom:5px; max-width: 600%;" allowfullscreen=""></iframe>

   Trame 中没有显示任何内容。

我想做什么

我希望我的 .html 文件显示在我的 iframe 中，因为它在“我能做什么”部分的第 1 部分中工作。

Answer 1

Reveal.js 输出是从某种本地服务器显示的，对吗？在这种情况下，据我所知，IFrame 将不允许您从本地文件加载。一般来说，您无法从 http:\\ 加载 file:\\，因为这将是一个巨大的安全漏洞。解决方案是运行基本的 HTTP 服务器来提供 Bokeh HTML 文件，例如 python -m http.server(或旧版 Python 2 的 python -m SimpleHTTPServer)和让您的 IFrame 从简单服务器加载 Bokeh 页面。