在reveal.js中嵌入一個本地html文件

Question

我想在我的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>

2. 我可以以 html 格式保存散景圖：

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>

   電車中沒有顯示任何內容。

我想做的事

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

Answer 1

Reveal.js 輸出是從某種本地服務器顯示的，對嗎？ 在這種情況下，AFAIK IFrames 將不允許您從本地文件加載。 通常，您不能從http:\\\\加載file:\\\\ ，因為這將是一個巨大的安全漏洞。 一個解決方案是運行一個基本的 HTTP 服務器來為 Bokeh HTML 文件提供服務，例如python -m http.server （或python -m SimpleHTTPServer用於傳統 Python 2）並讓您的 IFrame 從簡單服務器加載 Bokeh 頁面。